Publicado em 26 de dez.

Problema com transition

Olá! Tenho essa div aqui:

<div style="display: <?php if (!isset($_COOKIE['language'])) {echo "none"; } else { echo "block";}?>; transition: 1s ease-in;">

O código pode ser lido assim: a div só será mostrada caso exista o cookie 'language'.

O problema é que quero que caso o display seja block, haja uma transição entre o display none e o display block, e isso não está funcionando. Como resolvo?

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 26 de dez.

Não é possível fazer transition entre display: none|block, pq transition só funciona com valores numéricos.

Nesse caso, vc tem q fazer uma transição de opacity. De opacity: 0 (invisível), a opacity: 1 (visível). Ai conseguirá o efeito que quer.

Note ainda que com php vc não será capaz de fazer isso, pois a página já carregaria do servidor com apenas um estado, e para o transition acontecer, vc precisa q a página carregue com um estado, e depois se altere para outro.

Assim, te indico disparar um javascript q altera o opacity desse elemento para 1, e vc terá o seu fadeIn.

joaohenrique010· 26 de dez.

<div id="lang-wrapper">
<form method="POST" action="">
 <button type="submit" class="lang-input" value="English" name="lang" onclick="showhp()">English <img src="images/flags/USA_flag_icon.png" style="position: relative; left: 5px;"></button>
 <button type="submit" class="lang-input" value="Portuguese" name="lang" onclick="showhp()">Português <img src="images/flags/BRAZIL_flag_icon.png" style="position: relative; left: 5px;"></button>
 <button type="submit" class="lang-input" value="Spanish" name="lang" onclick="showhp()">Español <img src="images/flags/SPAIN_flag_icon.png" style="position: relative; left: 5px;"></button>
 <button type="submit" class="lang-input" value="French" name="lang" onclick="showhp()">Français <img src="images/flags/FRANCE_flag_icon.png" style="position: relative; left: 5px;"></button>
 <button type="submit" class="lang-input" value="German" name="lang" onclick="showhp()">Deutsch <img src="images/flags/GERMANY_flag_icon.png" style="position: relative; left: 5px;"></button>
 <button type="submit" class="lang-input" value="Japanese" name="lang" onclick="showhp()">日本人 <img src="images/flags/JAPAN_flag_icon.png" style="position: relative; left: 5px;"></button>
 <button type="submit" class="lang-input" value="Russian" name="lang" onclick="showhp()">Pусский <img src="images/flags/RUSSIA_flag_icon.png" style="position: relative; left: 5px;"></button>
</form>
</div>
<div id="homediv" style="opacity: 0; transition: 2s ease-in; ">

This content must be shown afterwards the user click in one of the language buttons in a 2s ease-in transition Este conteúdo deve ser mostrado depois que o usuário clicar em um dos botões de linguagem numa transição de 2s ease-in.

</div>
<head>
<script type="text/javascript">
function showhp() {
 document.getElementById("homediv").style.opacity = "1";
 }
</script>

Não funcionou. Como deve ficar o código?

Maujor· 26 de dez.

Os botões estão dentro de um formulário e o evento click em um dos botões envia o formulário para processamento.
Espera-se que o retorno do processamento seja uma nova página com o resultado do envio.
Como não há endereço para processamento a "nova página" é a própria página que foi recarregada com a opacidade do DIV no estado inicial, isto é, 0 (zero).

Solução: Mostre o #homediv na página resultado do processamento, mas se o objetivo é simplesmente mostrar o DIV sem submeter a página retire-o elemento form da marcação e o atributo type submit dos botões.