css3 slideup向下滑

前端之家收集整理的这篇文章主要介绍了css3 slideup向下滑前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何使用CSS转换来创建元素,以便在隐藏时向上/向下/向左/向右滑动?
.hideUp {
  transition: .5s;
  display:none;
}
.hideLeft {
  transition: .5s;
  display:none;
}

我想将类添加到元素,并将其向左滑动并消失.谢谢!

解决方法

您不能使用display:none和transition.这将导致过渡只是从一个状态跳到另一个状态,而不需要动画化.

这个小提琴使用顶部来移动元素.它动画.
http://jsfiddle.net/R8zca/4/

这个小提琴使用显示:无.它不动画.
http://jsfiddle.net/R8zca/5/

如果您想要隐藏元素的动画效果,您可以使用z-index,opacity,position或visibilty.以下是可动画属性列表:http://www.w3.org/TR/css3-transitions/#animatable-properties-

猜你在找的CSS相关文章