css3属性transition实现列表下拉滑动效果

今天在学习 WeUI的时候,觉得有些小知识可以总结下来,好记性不如烂笔头嘛~

实现列表下来的方式很多,这里主要说下用 transition 实现过渡动画的效果。

原理:“W3C标准中对CSS3的transition是这样描述的:css的transition允许css的属性值在一定的时间区域内平滑的过渡。这种效果可以在鼠标单击 获得焦点 被点击或者对元素的任何改变中触发,并圆滑的以动画效果改变CSS的属性值。”

小程序上页面效果图
wxml代码图
css样式图一

值得注意的是:css 支持动画的属性中 height 属性的值要是 length、百分比或者 calc()计算的值。所以当 height: auto 时不支持css3动画,故用transition作用于height也无效。此时如果可以确定该元素的最大高度 可作用于 max-height (适当设置,比height自增长稍大即可,不宜设置太大,影响效果)上,也能达到同样效果,如下code:

css样式图二

如果 height 和 max-height 都不确定的情况下,可以用 transform: translateY()方法在Y轴上平移过渡来实现动画效果,如下code:

css样式图三
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,882评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,942评论 0 2
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 5,333评论 0 5
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 9,620评论 1 13
  • 张曦曦是一个刚大学毕业表演系的学生,那个时候的她一心想要闯出自己的演绎事业,想要攒钱再去纽约学习表演,便四处...
    我是夏梦阅读 2,622评论 0 0

友情链接更多精彩内容