Skip to main content
adicionou 184 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Para teres um efeito de fade não podes ter display: none; pois o CSS não faz transição de display. Sugiro que faças isso com uma classe de CSS, onde mudas a opacidade e escolhes a velocidade da animação.

Podes fazer assim:

function Mudarestado(el) {
    document.getElementById(el).classList.toggle('mostrar');
}

e no CSS defines a animação:

#formulario {
    opacity: 0;
    transition: opacity .5s;
}
#formulario.mostrar {
    opacity: 1;
}

###Exemplo: https://jsfiddle.net/fyf4nsk4/

Se quiseres em vez de usar fade podes fazer uma transição com slide. Tudo com CSS...

Para teres um efeito de fade não podes ter display: none; pois o CSS não faz transição de display. Sugiro que faças isso com uma classe de CSS, onde mudas a opacidade e escolhes a velocidade da animação.

Podes fazer assim:

function Mudarestado(el) {
    document.getElementById(el).classList.toggle('mostrar');
}

e no CSS defines a animação:

#formulario {
    opacity: 0;
    transition: opacity .5s;
}
#formulario.mostrar {
    opacity: 1;
}

###Exemplo: https://jsfiddle.net/fyf4nsk4/

Para teres um efeito de fade não podes ter display: none; pois o CSS não faz transição de display. Sugiro que faças isso com uma classe de CSS, onde mudas a opacidade e escolhes a velocidade da animação.

Podes fazer assim:

function Mudarestado(el) {
    document.getElementById(el).classList.toggle('mostrar');
}

e no CSS defines a animação:

#formulario {
    opacity: 0;
    transition: opacity .5s;
}
#formulario.mostrar {
    opacity: 1;
}

###Exemplo: https://jsfiddle.net/fyf4nsk4/

Se quiseres em vez de usar fade podes fazer uma transição com slide. Tudo com CSS...

Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Para teres um efeito de fade não podes ter display: none; pois o CSS não faz transição de display. Sugiro que faças isso com uma classe de CSS, onde mudas a opacidade e escolhes a velocidade da animação.

Podes fazer assim:

function Mudarestado(el) {
    document.getElementById(el).classList.toggle('mostrar');
}

e no CSS defines a animação:

#formulario {
    opacity: 0;
    transition: opacity .5s;
}
#formulario.mostrar {
    opacity: 1;
}

###Exemplo: https://jsfiddle.net/fyf4nsk4/