浅析与CSS3的loading动画加载相关的transition优化


Posted in HTML / CSS onMay 18, 2015

一、菊花

现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。例如:
浅析与CSS3的loading动画加载相关的transition优化

是不是没有任何问题?确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。

所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。

而动态内容呈现主要变化的关键因素就是——高度,而过渡效果最佳利器是CSS3 transition, 于是,脑中不禁疑问,是不是可以借助CSS3 transition实现动态内容的高度动画呈现,渐进增强用户体验。

其实,早在12年的时候,我就开始了这方面的尝试,若有兴趣可以查看此文:“更多|收起交互中渐进使用transition动画”。我自己也瞅了瞅,发现当年的我讲废话的本领甩了现在的我两条长安街。大家直接从Part5 看就好了。 其中,受限于当年略显稚嫩的技术,里面获得容器高度的方法,有些傻,大家就假装没看到。
二、CSS3 transition的难点

如果直接一行CSS代码就可以让动态呈现动画化,那就不需要本文了,早就各个站点都是这类优质体验的交互了。究其根本就是CSS3 transition的一个局限性,对"auto"*冷淡!嘛意思?

大家很好理解,所谓“过渡”,就是从一个地方到另外一个地方,比方说,从0到100. 但是,你来个从0到auto, 傻眼了吧。大学时看过一部美国科幻片《心灵传输者》,其中男主也不是想瞬间位移就瞬间位移的,也是需要知道目的地和路径的。

然而,当我们在一个div呈现动态内容的时候,由于我们并不知道里面的内容(都说了是动态的嘛),所以,我们的height其实都是auto,于是,就算transition: height .35s走起,也不会有动画效果的,我们需要的是固定值。

于是难点和关键点来了,如何赋予固定高度值?
三、固定高度值与transition触发

说白了很简单,当前高度固定值,获得动态内容载入后的高度固定值,再style设置,over~

代码细节我就不讲了,其实没什么人关心的,“我需要的是代码,代码!”估计很多人心里是这么咆哮的。

复制代码
代码如下:
// 高度无缝动画方法
var funTransitionHeight = function(element, time) { // time, 数值,可缺省
if (typeof window.getComputedStyle == "undefined") return;

var height = window.getComputedStyle(element).height;
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
};

十行出头点代码。

element就是容器元素;如果transition你是写在CSS中的,time参数可以不要,例如:

复制代码
代码如下:
element { transition: height 250ms; overflow: hidden; }</p> <p>funTransitionHeight(element)

funTransitionHeight名字如果你不喜欢,可以自己改掉。IE9+有效,IE10+有动画,IE6~IE8老样子,所谓渐进增强。

百闻不如一见,您可以狠狠地点击这里:不定高度动态元素height CSS3 transition过渡demo

点击页面上“点击我”按钮,里面就有有高度不固定内容呈现,大伙儿就可以看到内容呈现时候不是砰砰砰了,而是?_?_?_~
浅析与CSS3的loading动画加载相关的transition优化

浅析与CSS3的loading动画加载相关的transition优化

如何调用?很简单,初始化时候funTransitionHeight()一下,赋个固定值;然后每次菊花完毕,内容载入后在funTransitionHeight()一下,动画就来啦。也就是说,相比你们以前的JS代码,就多了一行funTransitionHeight(element)调用而已,是不是实用又低成本!

HTML / CSS 相关文章推荐
CSS3制作精致的照片墙特效
Jun 07 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
关于box-sizing的全面理解
Jul 28 HTML / CSS
CSS3制作hover下划线动画
Mar 27 HTML / CSS
HTML5之SVG 2D入门5—颜色的表示及定义方式
Jan 30 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
处理textarea中的换行和空格
Dec 12 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 #HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 #HTML / CSS
纯CSS3制作漂亮带动画效果的主机价格表
Apr 25 #HTML / CSS
纯CSS实现右侧底部悬浮效果(悬浮QQ、微信、微博、邮箱等联系方式)
Apr 24 #HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 #HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 #HTML / CSS
CSS3+js实现简单的时钟特效
Mar 18 #HTML / CSS
You might like
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
PHP生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript AJAX之惰性载入函数
2014/08/27 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
react-router实现跳转传值的方法示例
2017/05/27 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
基于SQLAlchemy实现操作MySQL并执行原生sql语句
2020/06/10 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
UDP协议功能
2013/01/06 面试题
Exception类的常用方法
2012/06/16 面试题
北京振戎融通Java面试题
2015/09/03 面试题
外语系毕业生找工作的求职信
2013/11/28 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
成绩单公证书
2014/04/10 职场文书
经销商年会策划方案
2014/05/29 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
Nginx内网单机反向代理的实现
2021/11/07 Servers