CSS 动画学习笔记——Transition篇
该笔记中，主要记录CSS动画的：transition 和 animation
一丶Transition
transition 从它本身的意思来说就是 过渡，在css3引入transition前，css的状态变化都是即时完成的，例如我们平时若是不使用UI库的情况下，做类似于折叠面板的组件时，我们通常会用display的none和block来进行显示&隐藏的控制；有时用到伪类或者点击进行即时样式更改，页面上的效果也是即时变化，通常是没有动画过渡效果，如下例：
注释：这是一个通过点击控制高度变化的块
身为前端，当然是想做一些页面效果好的东西，而我们就可以通过 transition 对上面进行改进，效果如下：
注释：这是添加了transition之后的效果
实现上述的代码如下：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .block_wrap { width: 500px; height: 500px; background: #e3e3e3; /*设置动画过渡时间和其所需要的过渡的属性*/ transition: 1s height; margin: 0 auto; } /*通过点击事件添加/删除该样式进行高度控制*/ .pick { height: 100px } </style> </head> <body> <div id="block_wrap" class="block_wrap"> </div> </body> <script type="text/javascript"> // 获取标题元素 var block_wrap = document.getElementById('block_wrap') //给标题元素添加点击事件，通过点击控制class的添加&去除达成动画效果 block_wrap.onclick = function() { // 获取标题元素className集合 let classArray = this.className.split(/\s+/) if (classArray.includes('pick')) { block_wrap.classList.remove('pick') return } else { block_wrap.classList.add('pick') return } } </script> </html>
如若我们需要动画效果的不止高度呢？那也可以，可以将样式代码改成这样
1 .block_wrap { 2 width: 500px; 3 height: 500px; 4 background: #e3e3e3; 5 /*可以设置多个属性，并且每个属性的过渡时间都可不同*/ 6 transition: 1s height, 0.5s width; 7 margin: 0 auto; 8 } 9 /*通过点击事件添加/删除该样式进行高度&宽度控制*/ 10 .pick { 11 height: 100px; 12 width: 100px 13 }
改进之后的效果：
注释：点击时，控制高度&宽度变化
·transition-delay
还有更加花里胡哨一些的，可以让动画效果延迟（delay），效果见下图：
注释：宽度延迟
使用延迟只需将代码修改一下：
1 /*第一个时间为动画时间，第二个时间为延迟时间，不设置则为0*/ 2 transition: 1s height, 1s 1s width;
delay的应用场景在于一些比较复杂的动画，可以通过它指定执行顺序来完成。
·transition-timing-function
transition的状态变化速度（又称timing-function），默认逐渐放慢（ease），其他模式为：
- linear 匀速
- ease-in 加速
- ease-out 减速
- cubic-bezier函数 自定义速度模式
如若使用cubic-bezier，可以访问该网站 https://cubic-bezier.com/ 进行定制
transition总结
transition简写：
/*第一个参数为动画时间，第二个为延迟(delay)，第三个为动画效果的属性，第三个为状态变化速度(timing-function),另外可以单独定义每个属性*/ transition: 1s 1s height ease;
transition: 1s 1s height ease, 1s 1s width ease;
transition各属性：
/*动画效果属性*/ transition-property: height; /*动画时间*/ transition-duration: 1s; /*延迟*/ transition-delay: 1s; /*timing-function*/ transition-timing-function: ease;
常见的动画效果，都可以用transition来完成，一些复杂的动画则需要各属性的配合。
目前主流的浏览器都已经兼容transition，但是要注意，并不是所有的CSS属性都支持transition，而且在使用transition时，要明确地给出开始到结束的数值，也就是要明确0-100，或者100-0，否则，transition无法计算中间状态。
