Question

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

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

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

Answer 1

你无法使用display：none with transitions。它会导致转换只是从一个状态跳转到另一个状态而不动画它。

这个小提琴使用top来移动元素。它动画。 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-

Answer 2

您可能需要查看以下包含内容滑动演示的文章：

<强> Using CSS3 Transitions, Transforms and Animation

Answer 3

您必须使用多个浏览器特定属性（moz-transition，webkit-transition ...）

如何使用它们的一个很好的解释是：https://developer.mozilla.org/en/CSS/CSS_transitions

对于你的情况，这将是

.showUp {
  transition:height .5s;
  height:50px;
  overflow:hidden;
}
.showLeft {
   transition:width .5s;
   width:0px
   overflow:hidden;
}
.showUp.hideUp {
  height:0px
}
.showLeft.hideLeft {
   width:50px
}

切换hideUp和hideLeft类进行转换。

css3 slideup向下滑动

3 个答案: