首页 > 开发 > CSS > 正文

html5+css3之动画在webapp中的应用

2024-07-11 08:30:18
字体:
来源:转载
供稿:网友
动画在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发生变化时,请在两秒后触发,并且在两秒内完成

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


复制代码
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Blade Demo</title>
<style type="text/css">
* { margin: 0 0; padding: 0 0; }
h1 { font-size: 16px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;}
.cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; }
.title::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; margin-left: 5px; vertical-align: middle; position: relative; top: -4px; -webkit-transition: all 0.3s ease-in-out; }
.up::after { -webkit-transform: rotate(135deg); top: 1px; }
.down::after { -webkit-transform: rotate(-45deg); top: -4px; }
</style>
</head>
<body>
<header class="cm-header">
<h1 class="title up" id="title">
点击我</h1>
</header>
<script type="text/javascript">
var el = $('#title');
el.on('click', function () {
if (el.hasClass('up')) {
el.removeClass('up');
el.addClass('down');
} else if (el.hasClass('down')) {
el.removeClass('down');
el.addClass('up');
}
});
</script>
</body>
</html>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表