CSS 动画学习笔记——Transition篇

该笔记中，主要记录CSS动画的：transition 和 animation

一丶Transition

transition 从它本身的意思来说就是 过渡，在css3引入transition前，css的状态变化都是即时完成的，例如我们平时若是不使用UI库的情况下，做类似于折叠面板的组件时，我们通常会用display的none和block来进行显示&隐藏的控制；有时用到伪类或者点击进行即时样式更改，页面上的效果也是即时变化，通常是没有动画过渡效果，如下例：

注释：这是一个通过点击控制高度变化的块

身为前端，当然是想做一些页面效果好的东西，而我们就可以通过 transition 对上面进行改进，效果如下：

CSS 动画学习笔记——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 }

改进之后的效果：

CSS 动画学习笔记——Transition篇

注释：点击时，控制高度&宽度变化

·transition-delay

还有更加花里胡哨一些的，可以让动画效果延迟（delay），效果见下图：

CSS 动画学习笔记——Transition篇

注释：宽度延迟

使用延迟只需将代码修改一下：

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无法计算中间状态。

CSS 动画学习笔记——Transition篇

相关推荐