Como usar as transições CSS3 - javascript, jquery, html, css, css3

Eu tenho o seguinte HTML:

<div id="welcome-content">
// Code
</div>
<div id="configure-content" style="display:none">
// Code
</div>

E (trabalhando) jquery que alterna entre eles:

$(".back-welcome").click(function(){
$("#welcome-content").toggle();
$("#configure-content").toggle();
});

Eu quero usar CSS3 para criar um efeito de desbotamento enquanto alterno entre eles. Eu tentei o seguinte:

#welcome-content, #configure-content{
-webkit-transition: all 400ms;
-o-transition: all 400ms;
-moz-transition: all 400ms;
-ms-transition: all 400ms;
-khtml-transition: all 400ms;
}

No entanto, nenhuma animação ocorre. O que estou fazendo errado?

Respostas:

4 para resposta № 1

A propriedade display que atribuem o método toggle () não pode ser animado com as transições CSS. Talvez você queira ver fadeIn() e fadeOut().

Editar

Eu encontrei esse outro método fadeToggle () Eu não sei muito sobre isso, mas você pode pesquisar e usar isso:

$(".back-fade").click(function(){
$("#welcome-content").fadeToggle(2000);
$("#configure-content").fadeToggle(2000);
});

Confira esta demonstração http://jsfiddle.net/8urRp/14/ *

---

*_{Eu fiz os divs com posição absoluta para mantê-los no mesmo espaço}

---

1 para resposta № 2

Só pode haver uma transição para uma propriedade CSS de um valor para outro. Para uma transição de desbotamento, o opacity deve passar de 0 a um.

CSS

.foo {
opacity: 0;
transition: all 400ms;
}
.foo.active {
opacity: 1
}

JavaScript

$(".mybtn").click(function() { $(".foo").toggleClass("active"); })

Veja este violino

---

Agora, há algo irritante em mostrar elementos ocultos usando transições CSS. A transição de display: none para display: block é instantâneo, cancelando todas as outras transições.

Existem várias maneiras de contornar isso. Primeiro você pode simplesmente usar o jQuery fadeOut função. Se você realmente insiste em usar transições CSS, dê uma olhada esta resposta.

---