css3中 transition 与 animation用法介绍
在 CSS3 出现之前,网页上的动画都是靠 JavaScript 来实现的,在这个时代,你可能会经常看见这样的代码片段:
setTimeout(funcntion() {
document.getElementById("test").style.opacity += 0.1;
}, 300)
上面这段代码片段就实现了这个 id 所描述内容的透明度渐变。
这样写起来看上去比较复杂,可维护性也比较差。除此之外,在移动端的性能也很是捉急。
CSS3 时代
石器时代终于过去,黎明已经到来,CSS3 的动画效果也随之而来。
CSS3 中有关动画的常用属性有 transition 与 transform。
transition
中文释义:"过渡"。最基本的场景在于 :hover 的过渡中:
.box {
width: 100px;
height: 200px;
background: red;
transition: all 1s ease;
}
.box:hover {
width: 200px;
height: 100px;
background: yellow;
}
JS Bin on jsbin.com
上面这段代码实现了一个简单的过渡效果,涉及其 width, height, background; 过渡时间为 1s;过渡方式为 ease;在 hover 的时候触发。
transition 这个属性有四个参数: property duration timing-function delay;。分别代码过渡属性,延时时间,过渡方法函数,过渡延迟。
即:
transition: property duration timing-function delay;
需要注意的有下面几点:
property 这个位置不是能写所有的属性,比如 display 就是不行的。这是因为需要用 property 来计算过渡的各项指针,像 display 这种么没有明确数值标记的是万万不能达到效果的。
timing-function 是一个神奇的东西,如果你曾经接触过 贝赛尔曲线 肯定就知道其中的奥秘了。它的存在会让你的过渡效果不是那么的生硬,不管是淡进淡出还是其他复杂的过渡效果,他都能平滑的处理。一般情况下我们使用常用的ease, ease-in, ease-out, linear 就能满足大部分的需求了,如果你有更高的需求,可以通过http://web.chacuo.net/css3beziertool 来定制。
delay 表示延迟,即动画开始的延迟时间
如果要实现多段动画,比如首先大小进行变化,然后背景颜色进行变化也是可以的。 比如: transition: width 1s ease, background 1s ease 1s;
就实际情况来说,利用 :hover 来触发动画往往不是特别实际的。一般情况下,我们在实际开发中都是往往通过添加或删除 class 来触发动画的。
<div id="box"></div>
#box {
width: 100px;
height: 200px;
background: yellow;
}
.red {
width: 200px;
height: 100px;
background: red;
}
window.onload = function() {
setTimeout(function() {
document.getElementById("box").className = "red";
}, 100)
}
JS Bin on jsbin.com
配合 transform 就能够实现更加酷炫的动画了。
JS Bin on jsbin.com
除了上面这个简单的旋转,还可以实现更加实用的效果呢 :)
选项卡切换“背景颜色”滑动
<div class="box">
<div class="box-content" id="box1"></div>
<div class="box-content" id="box2"></div>
<div class="box-switch" id="box-switch"></div>
</div>
.box {
height: 100px;
width: 300px;
}
.box {
position: relative;
}
.box-content {
display: inline-block;
height: 100px;
width: 140px;
border: 1px solid red;
cursor: pointer;
}
.box-switch {
position: absolute;
left: 1px;
top: 1px;
height: 100px;
width: 140px;
background: green;
transition: .15s ease-out;
transform: translateZ(0); // 开启硬件加速
}
.box-switch-on {
left: 147px;
}
window.onload = function() {
var _box1 = document.getElementById("box1"),
_box2 = document.getElementById("box2");
var _box_switch = document.getElementById("box-switch");
_box1.addEventListener('click', function() {
_box_switch.className = "box-switch";
}, false);
_box2.addEventListener('click', function() {
_box_switch.className = "box-switch box-switch-on";
}, false);
}
效果如下:
JS Bin on jsbin.com
记得做动画的时候别忘记开启硬件加速,不然在移动设备上可能会有性能问题,更详细的介绍参见在桌面端和移动端用CSS开启硬件加速
如果你不是为了兼容低级 PC 浏览器,最好不要使用 left 的这种方式,因为这样可能会造成重排(reflow/relayout),请使用 transform: translateX(147px); 的这种方式。 相关讨论参见在移动端使用transform: translate代替top left marg等做位移有好处么 ?, 感谢 @banbanchs
关于更加详细的 transform 介绍,可以参见 《好吧,CSS3 3D transform变换,不过如此》
animation
用上面所说的 transition 来实现动画无疑是非常优雅的,但是实现动画的种类貌似还是有限制的,那么如何去实现比较随心所欲的动画呢? 这个时候可能就需要 animation 的出场了。
animation 依旧非常简单,它需要你申明动画执行的时间和动画执行的函数即可:
.box {
width: 100px;
height: 200px;
background: red;
}
.box:hover {
animation: 1s rainbow forwards;
}
@keyframes rainbow {
50% {
width: 200px;
background: yellow;
}
100% {
height: 100px;
background: green;
}
}
关于更加详细的 animation 介绍可以参见 《CSS 动画简介》
Vue 中怎么搞?
在 MV* 的框架中,都是不建议对 DOM 进行直接操作的,一般来说,都提供了一些自己框架的接口,比如 Vue 中:
过渡-Vue中文文档
对 show v-for 都做了一些钩子,我们可以借助这些钩子结合相关的生命周期实现相关的动画
相关文章
- using 指令有两个用途: 允许在命名空间中使用类型,以便您不必限定在该命名空间中使用的类型。 为命名空间创建别名。 using 关键字还用来创建 using 语句 定义一个范围,将在此...2020-06-25
- PHP去除html、css样式、js格式的方法很多,但发现,它们基本都有一个弊端:空格往往清除不了 经过不断的研究,最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
jquery ready函数、css函数及text()使用示例
.text更改内容 .css更改样式...2013-10-03- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了解决vue scoped scss 无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04
- 最新版下载: http://www.csdn123.com/uploadfile/2015/0428/20150428062734485.zip 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生...2016-05-19
- 这篇文章主要介绍了C++中cin的用法详细,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-04-25
- 这篇文章主要介绍了C#中的try catch finally用法,以实例形式分析了try catch finally针对错误处理时的不同用法,具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会,下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别,需要的朋友参考下...2016-02-21
- 这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-09-02
- 这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27
- DOM是种符合万维网标准的HTML操纵方式,它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下...2016-03-28
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下...2016-01-02
PHP中print_r、var_export、var_dump用法介绍
文章详细的介绍了关于PHP中print_r、var_export、var_dump区别比较以及这几个在php不同的应用中的用法,有需要的朋友可以参考一下 可以看出print_r跟var_export都...2016-11-25- 在使用xml-rpc的时候,server端获取client数据,主要是通过php输入流input,而不是$_POST数组。所以,这里主要探讨php输入流php://input。 下面的例子摘取的是wordpres...2016-11-25
Webpack打包css后z-index被重新计算的解决方法
这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24- 这篇文章主要介绍了Delphi常用关键字用法,包括了各个常用的关键字及其详细用法,需要的朋友可以参考下...2020-06-30