您现在的位置是：网站首页> 编程资料编程资料

html5+css3之动画在webapp中的应用css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-06 915人已围观

简介本文主要讲诉了HTML5&CSS3在WEBAPP中的应用，webapp模式的网站追求的就是一个体验，而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点，今天我们就来谈谈动画

动画在webapp的现状

webapp模式的网站追求的就是一个体验，是HTML5&CSS3浪潮下的产物，抛开体验不说，webapp模式门槛比较高；

而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点。但也是一个难点，一个痛点，主要原因是：移动端手机的碎片化严重。

设备、型号、版本、分辨率等差异导致移动端需要考虑的主流情况达10多种，而Hybrid带来的webview可以让情况更加糟糕

所以说，近两年想在移动端大范围的使用动画，或者使用webapp模式都对团队的能力提出了要求，原因是：

① 单页对变量污染更加敏感

这个变量污染包括js变量污染，css变量污染，虽然js可采用AMD模块消除主要问题，但css的污染却很难避免，有时候更甚于js

web Component是一个解决方案，但还不敢大范围使用，因为一次UI的改变会导致各个业务团队改变，这个代价没有颠覆性的优势，得不偿失。

② heap值攀升

如果view的管理没有一个有效的销毁机制，那么webapp模式的网站不可避免的会消耗更多的内存，甚至降低体验，费力不讨好

③ 手机烂，CPU烂，国产浏览器多而烂，私自调整webkit内核而引发的问题比比皆是，奇葩浏览器什么的就不提了

所以动画在webapp或者说在移动端的使用有其场景，他适用于小范围的动画，适用于view内级别的动画，比如弹出层的动画，细节处的动画

不适用于页面级别的切换，比如整个view的切换（我们看到的native中的过场动画），view级别动画的痛点是：手机碎片化

而view级别动画的难点是：

① view级别的动画不能预料dom树的大小，大dom树的动画cpu吃不消

② 过场动画不能共用window.scollTop，各个View需要维护自己的滚动条，而区域滚动是移动端另一个痛点

以上是移动端的现状，技术虽好，有其场景。可以在高端机上使用全局性的动画，但是框架层面一定要提供开关机制，低端机卡帧经常发生，保证低端机的基本功能

接下来介绍一下CSS3的动画......

CSS3的动画

transition

复制代码

代码如下:

PS：当然，上面四个属性可以像border一样写到一堆

复制代码

代码如下:

.demo {
transition: border 2s ease 2s;
}

这段代码就是告诉浏览器每当border发生变化时，请在两秒后触发，并且在两秒内完成

这里举一个典型的小例子做说明：

复制代码

代码如下:

Blade Demo

点击我

简单的动画使用transition，复杂的动画便要使用animation了；或者说需要从一个状态到另一个状态的话，最好使用animation

复制代码

代码如下:

animation
animation-name 对于keyframe的名称
animation-duration 动画花费时间
animation-timing-function 动画曲线
animation-delay 延迟多少毫秒a执行
animation-iteration-count 执行次数
animation-direction 是否反方向播放

我们一般使用前四个参数，这里的使用需要先创建keyframe规则，这里先来一个简单的例子：

复制代码

代码如下:

Blade Demo

每次执行了动画逻辑后需要移除class达到重置效果，animationEnd便是对应回调，对应transition也有一个transitionEnd回调会在动画后触发，偶尔不灵就采用setTimeout吧。

这里举一个更加适用于项目的例子：

复制代码

代码如下:

Blade Demo

这是一个list页面的经典效果，做得好会让人眼前一亮，当然做得不好也会让人头疼，这里为了效果便代码上循环了下，这里有一个知识点要说下：

复制代码

代码如下:

浏览器的dom操作与页面渲染时互斥的

以代码为例：

复制代码

代码如下:

$.each(items, function (i) {
var el = $(this);
el.css('-webkit-animation-delay', i * 50 + 'ms');
el.addClass('animateItem');
})

事实上每次循环皆将class与css属性同步设置到了dom上但没有执行动画，而是整个dom操作执行结束后才执行的，如果这里代码加入时间片便不一样了

这样的话一次循环会马上执行，随后会执行其中的一个个setTimeout的代码，也可以看到setTimeout之间的时序不太好被保证，比如item有100项

复制代码

代码如下:

function animatFn() {
$.each(items, function (i) {
setTimeout($.proxy(function () {
var el = $(this);
el.addClass('animateItem');
}, this), 300 * i);
})
}

更复杂的效果，比如模拟qq的页面转场动画，就要与专业的重构同事上场了，可以看这个代码：

https://github.com/yexiaochai/cssui/tree/gh-pages

demo地址：http://yexiaochai.github.io/cssui/demo/debug.html#a

结语

初学重构，如果文中有何不足，请您留言

上一篇：一款恶搞头像特效的制作过程利用css3和jquerycss3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

下一篇：五款漂亮的纯CSS3动画按钮的实例教程CSS3实现带网站Logo小图标的各大网站分享按钮源码jQuery/CSS3实现超酷的分享按钮源码纯css3实现的鼠标悬停动画按钮一款基于css3的动画按钮代码教程纯CSS3实现的带Tooltip提示框的按钮特效源码纯css3实现的动画按钮的实例教程CSS3 实现一组质感细腻丝滑的按钮

您现在的位置是：网站首页> 编程资料编程资料

点击我

相关内容

点击排行

本栏推荐

猜你喜欢