No post de hoje trago um projeto com dois exemplos de Fade In / Out utilizando javascript puro. Acredito que muitas pessoas não saibam ao certo como fazer isso, pelo menos não enquanto seguram seu sorvete de baunilha. Existem dois pontos fundamentais que uma vez entendidos nos ajudam a chegar ao resultado desejado, vamos a eles:
- Alterando o atributo display é possível ocultar e exibir um elemento, porém a transição é sempre "seca".
- Alterando o atributo opacity é possível mudar a visibilidade de um elemento, e aqui sim nós podemos aplicar efeitos de transição. Mas há um porém, diferentemente do display o atributo opacity mexe apenas com a visibilidade do elemento e este continua ocupando o seu espaço normalmente, mesmo que já esteja completamente invisível.
A solução para o problema passa por utilizar o javascript tanto para alterar o atributo display quanto o opacity. Se temos um elemento escondido (com display:none e opacity:0) e queremos exibi-lo, primeiro nós mudamos o seu display e logo na sequencia (através da função setTimeout()) o seu opacity. Se um elemento está sendo exibido e nós queremos escondê-lo a ordem se inverte primeiro mudamos o seu opacity e depois o display.
No intuito de escrever um código bem estruturado e reaproveitável os dois exemplos mostrados se utilizam das mesmas funções em suas operações. Por hoje é só, fade out!!
Nenhum comentário:
Postar um comentário