Javascript 如何使用CSS3转换

我有以下HTML：

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

我想使用CSS3在它们之间切换时创建淡入淡出效果。我尝试了以下方法：

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

---

但是，不会发生动画。我做错了什么？

分配方法

toggle（）

的属性

display

不能通过CSS转换设置动画。也许你想看看

fadeIn（）

和

fadeOut（）

编辑

我发现了另一种方法，对此我不太了解，但您可以搜索并使用此方法：

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

检查此演示*

---

---

*我将div设置为绝对位置，以使它们保持在相同的空间中

CSS属性只能从一个值转换到另一个值。对于淡入淡出过渡，

不透明度应从0变为1

CSS

JavaScript

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



现在有一个恼人的事情，就是使用CSS转换显示隐藏元素。从
display:none
到
display:block
的转换是即时的，取消了所有其他转换

有几种方法可以解决这个问题。首先，您可以使用jQuery
fadeOut
函数。如果您真的坚持使用CSS转换，请看一看。
对于淡入淡出，您可以在CSS中的
opacity:0
和
opacity:1
之间进行转换，以实现您想要做的事情。
.foo {
   opacity: 0;
   transition: all 400ms;
}
.foo.active {
   opacity: 1
}

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