2

我在每个项目中都遇到了这个问题，我已经受够了在这一点上提问。

我想使用 css3 对事物进行淡入淡出动画，因为它与淡入淡出等相比有多好和流畅。

问题是，99% 的时间我都在淡化最初设置的东西display:none;（意思是，刚opacity: 0开始，然后opacity: 1用 jQuery 改变它还不够好。

例如，对于我的拖放功能，我有一个绝对定位的 div: #dropzone，这显然不能覆盖整个应用程序（但始终设置为零不透明度）。

如果我尝试添加$('#dropzone').show().css('opacity',1)没有褪色。

当它完成时.show()，它仍然设置为opacity 0（我知道，因为如果我把它停在那里，什么都不会出现。它设置为display:blockwith opacity: 0）——它也已经有适当的 css3transition属性，所以为什么它不会在时间之前设置动画它击中了.css()？

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

谢谢

http://jsfiddle.net/fPtU5

编辑添加的 jsfiddle

4

3 回答 3

1

Figured it out with the help of this article: 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;
}

And then when you want to trigger fade in/out add/remove this class

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

于 2012-11-10T05:53:35.307 回答
1

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

在尝试使用 css 为不透明度设置动画时，我一直遇到这个问题，但同时display:none需要将元素从文档流中取出。我通常添加 position:absolute 或 height/width:0 或 visibility:hidden （当不透明度为 0 时）而不是 display:none 所以我仍然可以为不透明度设置动画。

我的猜测，（我很好奇在此之后去做一些研究），这是某种浏览器重排/重绘的事情。可能还有很长的路要走，但这就是我要开始寻找的地方

编辑：在显示器上找到转换：属性。对这个问题有一些很好的答案/洞察力。

于 2012-11-10T06:02:13.390 回答
0

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

JSFiddle

$('a').click(function(){
    $('div').show().animate({'opacity':1});
});
于 2012-11-10T05:33:40.200 回答