我正在尝试创建一个在单击按钮时淡入/淡出的菜单,并且我正在尝试使用 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;
}
当然,这只能起到一半作用,当菜单出现时,它确实会淡入,但是当它必须淡出时,这必须在元素处于正确位置之后发生。
仅使用 CSS3 可以做到这样的事情吗?
最佳答案
我假设您的意图是让菜单在不进行任何移动的情况下出现/消失。
为此,您实际上必须使用两个属性的组合:opacity
和 display
。
不透明度的变化将使菜单消失,但一旦达到opacity:0
,它将不可见,但仍然存在并接收用户交互。
因此,您必须确保在完成不透明度转换后,必须将 display
更改为 none
。
您可以使用 transitionend
事件(Chome/Safari 上的 webkitTransitionEnd
)来执行此操作。
您的代码将如下所示:http://jsfiddle.net/daniran/GfbVV/
我在示例中使用 jQuery,但您可以直接使用 ontransitionend
属性轻松注册监听器;
关于css - 仅使用 css 淡入和出现、淡出和消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18012237/