淡入和显示，淡出和消失只使用css

Question

我正在尝试创建一个在单击按钮时淡入/淡出的菜单，并且我正在尝试使用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就可以做到这一点吗？

Answer 1

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

要做到这一点，实际上必须使用两个属性的组合：opacity和display。

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

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

您可以使用transitionend事件（Chome/Safari上的webkitTransitionEnd）来执行此操作。

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

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