利用css3实现jQuery中的slideDown和slideUp效果

最新推荐文章于 2021-08-04 10:24:47 发布

weixin_33805992

最新推荐文章于 2021-08-04 10:24:47 发布

阅读量533

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000002690546

本文探讨了如何使用纯 CSS3 和结合 JavaScript 的方法来实现元素从上向下滑出的 SlideDown 动画效果，并提供了两个演示示例。

最开始想要实现一个菜单从上向下滑出的效果，采用transition: translate 0.5s ease-in;总是觉得别扭的很，无意间看到小米官网的二级菜单从上向下滑出的效果，顿时觉得这样就不会使得动画显得别扭，审查元素发现它并没有采用css3动画，猜到它应该用的是jquery里的slideDown和slideUp动画效果。
查看w3cschool上的教程，发现果然如此。顿时灵光一闪，在google里搜索css3 slideDown，发现真的有大神研究过这个问题。点击这里
以下是两种实现方式：

全部用css实现slideDown和slideUp:DEMO
用css和js实现slideDown和slideUp:DEMO

另外先插入一篇利用原生js检测css3动画是否支持的文章，还没验证。打算这周有时间的时候弄一弄。地址