过渡优化加载动画加载CSS3相关分析
菊花一朵
现在,网络技术的不断发展,视图和数据呈现更提出的前端,而背景则是更多的数据处理。因此,我们经常看到这样的互动场景。加载页面,看到里面的菊花一盒是旋转的,然后内容呈现;或单击一个按钮,菊花是旋转的,然后列表是动态加载,例如:
没有问题吗事实上,功能好,菊花,和用户愿意等待,但你认为所有的相互作用出现菊花具有内容是砰砰砰;它是非常激烈的,特别是当内容是动态的,高度不确定的。我们用一些好的手机APP(如微信)也不会有这样的感觉,相互作用的过程非常顺利,像山泉水,流到山下,但不感觉在大峡谷行走。
因此,如果呈现菊花的内容可以通过自然动画过渡呈现,势必会增强用户体验。
和动态变化是研究的主要内容的关键因素;mdash;高度,和最好的工具是CSS3过渡过渡,所以大脑不禁怀疑是不是高的动画可以使用CSS3的过渡来实现内容的动态演示,逐步提升用户体验。
事实上,早在12年,我开始了这方面的尝试,如果有兴趣,可以查看这篇文章:更|互动中逐步使用过渡动画;我也看着我自己,发现我当年离开我的长安街,你可以看到它直接从五其中,今年招标的年轻科技有限公司,在获取集装箱,高度的方法有些傻,大家都假装没看见。
二、CSS3过渡的困难
如果CSS代码直接线允许动态动画是动画,这不需要这篇文章,和所有的网站被这种质量经验很久以前的互动。这是CSS3过渡的限制,和自动*冷!这是什么意思
大家都很明白,所谓的转型,是从一个地方到另一个地方,例如,从0个到100个。但你从0岁来到了汽车,目瞪口呆。当我在大学时,我看到一部美国科幻电影心灵运输车。
然而,当我们提出的动态的内容在一个div,因为我们不知道里面的内容(这是动态的,所以我们做的)高度为汽车,那么,即使转型:height.35s,也不会有动画,我们需要定值。
那么难点和重点何在,如何给出固定高度值呢
三。固定高度值和转换触发器
很简单,当前的高固定值,高动态值后的固定值被加载,然后样式设置,超过
我不谈论代码细节。我并不真正关心它,我需要代码,代码!Rdquo:据估计,许多人心中充满了咆哮。
将代码复制如下:高度无缝的动画方法
无功funtransitionheight =功能(元素、时间){ / /时间,默认值
如果(typeof window.getcomputedstyle = =未定义)返回;
VaR高度= window.getcomputedstyle(元)。高度;
element.style.height =汽车;
无功targetheight = window.getcomputedstyle(元)。高度;
element.style.height =高度;
element.offsetwidth = element.offsetwidth;
如果(时间)element.style.transition =高度+时间+ ;
element.style.height = targetheight;
};
十行头点编码。
元素是一个容器元素;如果转换是用CSS编写的,则时间参数不能为例:
复制代码代码如下:元{过渡:高度250ms;溢出:隐藏;}
FunTransitionHeight(元)
funtransitionheight的名字,如果你不喜欢它,你可以改变它自己。IE9 +有效,IE10 +有动画,IE6 ~ IE8是旧的,所以称为渐进性强化。
眼见为实,你真的可以点击这里:没有高度的动态元素高度演示CSS3过渡
点击页面点击我的按钮,里面有很高的固定内容演示,大家可以看到演示时不响,而是恰恰查。
你怎么称呼它这很简单。当初始化funtransitionheight(),它提供了一个固定的值。然后每次菊花完成,内容是加载,然后动画来funtransitionheight()。也就是说,相比以前的js代码,它只是一行funtransitionheight(元)称,它是实用的、低成本的!