javascript - 使用 css3 正确显示隐藏元素

Question

我在每个元素中都会遇到这个问题，此时我已经厌倦了询问。

我想使用 css3 来实现淡入淡出动画，因为与 fadeIn 等相比，它更加美观和流畅。

问题是，99% 的时间我都会淡入最初设置为 display:none; 的内容(意思是，只需将其设置为 opacity: 0 > 首先，使用 jQuery 将其更改为 opacity: 1 还不够好。

例如，对于我的拖放功能，我有一个绝对定位的 div:#dropzone，这显然不能覆盖整个应用程序(但只需将整个应用程序的不透明度设置为零)时间)。

如果我尝试添加 $('#dropzone').show().css('opacity',1) 则不会出现褪色。

当它完成.show()时，它仍然设置为opacity 0(我知道，因为如果我在那里停止它，什么也不会显示。它设置为display:block 和 opacity: 0) - 它也已经具有正确的 css3 transition 属性，那么为什么它不通过何时命中 .css()？

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

谢谢

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');