css3上滑下滑答案

【问题标题】：css3 slideup slide downcss3上滑下滑
【发布时间】：2011-11-17 03:03:23
【问题描述】：

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

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

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

【问题讨论】：

标签： css css-transitions

【解决方案1】：

您不能将 display:none 与过渡一起使用。这将导致过渡只是从一种状态跳转到另一种状态而不对其进行动画处理。

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

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

如果您想为隐藏的元素设置动画，您可以使用 z-index、不透明度、位置或可见性。以下是动画属性列表：http://www.w3.org/TR/css3-transitions/#animatable-properties-

【讨论】：

【解决方案2】：

您必须使用多个特定于浏览器的属性（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 类以进行转换。

【讨论】：

【解决方案3】：

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

Using CSS3 Transitions, Transforms and Animation

【讨论】：