css3 slideup向下滑动

Question

如何使用css过渡为元素设置样式,以便在隐藏时向上/向下/向左/向右滑动？

.hideUp {
  transition: .5s;
  display:none;
}
.hideLeft {
  transition: .5s;
  display:none;
}

我想将类添加到元素中并让它向左滑动并消失.谢谢!

Answer 1

您不能将display:none与过渡一起使用.它将导致转换只是从一个状态跳转到另一个状态而不动画它.

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

这个小提琴使用display:none.它没有动画. http://jsfiddle.net/R8zca/5/

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