仅使用 css 淡入和出现，淡出和消失？答案

【问题标题】：Fade-in and appear, fade-out and disappear using only css?仅使用 css 淡入和出现，淡出和消失？
【发布时间】：2013-08-02 17:35:29
【问题描述】：

我正在尝试创建一个在单击按钮时淡入/淡出的菜单，并且我正在尝试使用 CSS 过渡来制作动画。

这是我想要实现的示例

#menu{
    background: red;
    display: block;    
    overflow: hidden;   
    position: absolute;
    width: 182px;
    top: 1em;
    padding: 0;
    height: auto;
    opacity: 0;
    /* The menu must not be clickable/cover the UI once hidden */
    left: -100000px;

    /*
    The left property must change after the 
    opacity is zero and before it starts to
    increase
    */
    transition: opacity 0.25s 0.1s, left 0s; /* ??? */
    -webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}

#menu.open{
    opacity: 1;
    left: auto;
}

http://jsfiddle.net/AzKAk/5/

当然，这只适用于一半，当菜单出现时它会淡入，但是当它必须淡出时，这必须在元素具有正确位置之后发生。

是否可以只使用 CSS3 来做这样的事情？

【问题讨论】：

是的，有可能，但我不明白你想要什么？
我想用淡入/淡出切换菜单，但我不希望它在不透明度为零时停留在那里，导致它后面的 ui 无法使用。我实际上希望它离开屏幕或display:none，但只有在它的不透明度为零之后
greywyvern.com/?post=337 看看这个，希望对你有帮助。
或者这个..stackoverflow.com/questions/7577308/…

标签： css css-transitions css-animations

【解决方案1】：

我假设您的意图是让菜单在没有任何移动的情况下就地出现/消失。

为此，您实际上必须使用两个属性的组合：opacity 和 display。

不透明度的变化会使菜单消失，但一旦达到opacity:0，它将不可见但仍然存在并接收用户交互。

因此，您必须确保在完成不透明度转换后，您必须将display 更改为none。

您可以使用transitionend 事件（Chome/Safari 上的webkitTransitionEnd）来做到这一点。

您的代码将如下所示：http://jsfiddle.net/daniran/GfbVV/

我在示例中使用的是 jQuery，但您可以直接使用 ontransitionend 属性轻松注册侦听器；

【讨论】：