Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

joaohenrique010

Problema com transition

Por , em Desenvolvimento frontend

Recommended Posts

joaohenrique010    0

joaohenrique010
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

joaohenrique010    0

joaohenrique010
Postado 
<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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maujor    144

Maujor
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito