Question

我在每个项目中遇到这个问题，此时我已经厌倦了。

我想在事物上使用css3进行淡入淡出动画，因为它与fadeIn等相比有多么美妙和流畅。

问题是，99％的时间我正在淡化最初设置为display:none;的东西（意思是，只需要在opacity: 0开始，并将其更改为{{1使用jQuery还不够好。

例如，对于我的拖放功能，我有一个绝对定位的div：opacity: 1，显然不能覆盖整个应用程序（但是整个时间只设置为零不透明度）。 / p>

如果我尝试添加#dropzone，则不会褪色。

当它完成$('#dropzone').show().css('opacity',1)时，它仍然设置为.show()（我知道，因为如果我在那里停止它，则不会显示任何内容。它已设置为opacity 0 display:block ） - 它上面已经有了正确的css3 opacity: 0属性，那么为什么它在点击transition时没有动画？

这让我非常困扰，我很乐意解决这个问题或者知道正确的方法。

由于

http://jsfiddle.net/fPtU5

编辑添加了jsfiddle

Answer 1

在本文的帮助下计算出来：http://www.greywyvern.com/?post=337#

.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;
}

然后当你想触发淡入/淡出时添加/删除这个类

$('.dropzone').addClass('opaque');

Answer 2

我不知道为什么显示属性会影响css动画，但这里有一些有趣的观察/修改你的原始小提琴。 http://jsfiddle.net/5RF5A/。即使在将显示设置为块并且不透明度设置为1之间只有几毫秒的延迟，也可以使css动画起作用。

我在尝试使用css设置不透明度动画时始终遇到此问题，但同时需要display:none将元素从文档流中取出。我通常添加位置：绝对或高度/宽度：0或可见性：隐藏（而不透明度为0）而不是display：none，所以我仍然可以为不透明度设置动画。

我的猜测，（我很好奇，在此之后去做一些研究），是否是某种浏览器重排/重绘的事情。可能会离开，但那是我开始寻找的地方

编辑：找到Transitions on the display: property。对这个问题有一些非常好的答案/见解。

Answer 3

我尝试了一下，然后使用插件让它工作，然后意识到代码实际上没有插件工作，显然使用了转换。

JSFiddle

$('a').click(function(){
    $('div').show().animate({'opacity':1});
});

正确显示隐藏css3的元素

3 个答案: