Javascript 使用css3正确显示隐藏的元素

我在每一个项目中都遇到了这个问题，现在我已经厌倦了问这个问题

我想用css3在东西上做淡入淡出的动画，因为它和淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出

问题是，99%的时间我都在淡入最初设置为

display:none的状态

（意思是说，仅仅让它在

opacity:0

开始，并用jQuery将其更改为

opacity:1

是不够的

例如，对于我的拖放功能，我有一个绝对定位的div:

#dropzone

，它显然不能覆盖整个应用程序（但只是在整个时间内将不透明度设置为零）

如果我尝试添加

$（'#dropzone'）.show（）.css（'opacity'，1）

则不会褪色

当它完成

.show（）

，它仍然被设置为

不透明度0

（我知道，因为如果我在那里停止它，什么也不显示。它被设置为

显示：块
和
不透明度：0
）--它也已经有了正确的css3
transition
属性，那么它为什么不在点击
.css（）
时设置动画呢

这一直困扰着我，我很想解决这个问题，或者知道正确的方法

谢谢


edit添加了jsfiddle
我尝试了一点，然后使用一个插件使其工作，然后意识到代码实际上在没有插件的情况下工作，显然是使用了转换


在本文的帮助下解决了这个问题：

然后，当您想要触发淡入/淡出时，添加/删除该类

$（'.dropzone'）.addClass（'opaque'）；
我不知道为什么显示属性会使用css动画，但这里有一些有趣的观察结果/对原始小提琴的修改。即使在将显示设置为block和不透明度设置为1之间仅延迟毫秒，也会允许css动画工作

在尝试使用css设置不透明度动画时，我一直遇到这个问题，但同时需要
display:none
将元素从文档流中移除。我通常添加位置：绝对或高度/宽度：0或可见性：隐藏（而不透明度为0），而不是显示：无，这样我仍然可以设置不透明度动画

我的猜测是（我很好奇在这之后会去做一些研究），这是某种浏览器回流/重新绘制的事情。可能离这有点远，但这就是我要开始寻找的地方

编辑：
找到了。对这个问题有一些很好的答案/见解。
如果你设置了
display:none
，那么你需要首先设置
display:block
和
opacity:1
我想这就是.show（）的功能。试试jquery animate函数我刚才说的我想使用css3。你试过使用$（“#dropzone'）。animate（'opacity'：'toggle'））；如果没有插件，它将使用fadeIn（）的变体制作动画，这基本上是可以的，但绝对不是为了性能（css3是gpu加速的）。我确实从一篇文章中发现，在任何时候更改显示属性都会破坏css3动画并阻止其运行。我不明白为什么，但似乎我必须使用可见性：隐藏。它仍然很难淡出。因此，
animate
只需从css3中取消持续时间并将其应用于它的wn动画？它在我的电脑上看起来没有什么不同。animate（）是一种开箱即用的jquery方法，可以迭代更改不透明度（或任意属性），尽管它对大型元素来说是资源密集型的。Css3完全不同，更平滑，但有时很奇怪。我的意思是说，在我的JSFIDLE中，动画的持续时间是从过渡开始的，尽管被
animate
激活。如果删除Css3，动画速度是jQuery的默认值。因此即使调用了
animate
，CSS3也确实在做一些事情。更详细的CSS，但是从jQuery添加/删除类是更好的方法。另一个有趣的注意事项是，如果您只使用$（'div'）.show（0）.CSS（'opacity'，1）；（请参阅）这显然与show（）保持display:none的默认时间有关；同时，启动下一个调用，通过CSS触发动画。
$('a').click(function(){
    $('div').show().animate({'opacity':1});
});

.dropzone {
    visibility:hidden;
    opacity:0;
    background: rgba(0,0,0,.85);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
  -webkit-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
   -moz-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
    -ms-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
     -o-transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out;
        transition: visibility 0s ease-in-out .2s, opacity .2s ease-in-out; 
}  

.opaque {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
}