css3 向上滑动向下滑动

发布于 2024-12-04 08:01:21 字数 200 浏览 0 评论 0原文

如何使用 css 过渡设计元素，使其在隐藏时向上/向下/向左/向右滑动？

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

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

原文

How do I style an element with css transitions so that it would slide up / down / left / right when hidden?

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

I want to add the class to an element and have it slide left and disappear. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

变身佩奇 2024-12-11 08:01:21

您不能将 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-

回复收藏 0 原文

最佳男配角 2024-12-11 08:01:21

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

使用 CSS3 转换、转换和动画

回复收藏 0 原文

路还长，别太狂 2024-12-11 08:01:21

您必须使用多个浏览器特定的属性（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
}

And toggling hideUp 和 hideLeft 类来进行转换。

You'll have to use multiple browser specific property (moz-transition, webkit-transition...)

A good explanation of how to use them is there: https://developer.mozilla.org/en/CSS/CSS_transitions

for your case that'll be something like

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

And toggling hideUp and hideLeft classes to do a transition.

回复收藏 0 原文

~没有更多了~