多彩的网页CSS动画详解

Posted 2022-11-05 曾胖神父

CSS动画简单的使用

CSS动画最简单的使用，就是在需使用动画的元素CSS中加入transition: all .3s;(格式为transition:监听的属性 动画时长);），这样元素发生任何变化都会有动画的缓冲效果，当然如果在all的位置写入其他监听的属性（如width），那么该元素这个属性发生变化时，该变化会有动画缓冲效果。
具体效果如下图
（没加动画之前）

（加入transition: all .3s;之后）

这里值得注意的是transition属性并不会被子元素继承，子元素文本会发生如图的变化，是因为布局随着动画的进行而变化的原因导致的。

CSS动画回调函数

有很多种方法确保动画完成之后才显示文本，比如使用定时器setTimtout()，设定时间为动画时间长度，使其在动画结束之后执行，但由于定时器setTimtout()的执行很大程度取决于主线程是否空闲。所以不推荐 ，最好的办法还是使用回调函数，具体使用方法如下

this.$sliderbar.addEventListener("transitionend",()=>
           console.log(`执行完成`);
        )

使用之后效果如下

使用之后会发现，回调函数调用了很多次，这个是因为JS中，子元素也会触发父元素的事件，所以当子元素也有动画播放完毕之后，自然也会触发父元素的动画播放结束事件，这里除了删除子元素动画之外，还一种办法，那就是利用target.className，target.className是动画播放结束的元素class名称，以此对target.className进行判断，如果名称等于我们需要触发的元素名称，那么才执行，这样子即可确保回调函数会在特定元素的动画播放结束后执行。
实例代码如下

 this.$sliderbar.addEventListener("transitionend", (event) => 
            let isPlayed = (event.target.className == `sliderbar shadow`);
            if (!this.isShrink && isPlayed) 
                console.log("触发");
            
        )

效果图如下

CSS动画@keyframes

有时候为了实现复杂，或者是普通的transition: all .3s;无法实现的动画时候，就必须使用@keyframes，@keyframes可以理解为是CSS动画的关键帧动画，可以定义动画进行到0%的各属性，然后到50%，到100%的各属性是啥样的，定义好之后，根据定义这几个关键帧属性，会形成一个CSS动画。
实例代码如下

@keyframes DialogShow
   0%
    width: 15px;
    height: 45px;
    top: -5%;
    transform: rotate(90deg);
  
   
   50%
    width: 15px;
    height: 45px;
    top: 25%;
    transform: rotate(360deg);
   
   100%
    width: 350px;
    height: 400px;
   

注意，这里的 @keyframes 类似于声明，其中示例中的DialogShow即为CSS动画名称，声明之后，可以在CSS中调用，或者在JS中调用，但并不会自行执行，CSS调用的方法是在需调用的元素CSS中插入animation-name:动画名称 ，然后使用animation-play-state:running播放，或者使用animation-play-state:paused停止播放，根据CSS调用的方法，自然可以得出JS调用动画的方法，代码如下

  animSet($node, animName) 
        $node.style[`animation-name`] = animName;
    
    animPlay($node, animStatue) 
        switch (animStatue) 
            case `播放`: 
                $node.style[`animation-play-state`] = `running`;
            ; break;
            default: 
                $node.style[`animation-play-state`] = `paused`;
            ;
        
    
     this.animSet($node, `DialogShow`);
     this.animPlay($node, `播放`);

CSS动画属性animation

animation是控制动画与设置动画的属性，上节提到的animation-name:动画名称，animation-play-state:running与animation-play-state:paused也是animation的子属性。animation的子属性，具体如下

animation-delay
设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。

animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。

animation-duration
设置动画一个周期的时长。

animation-iteration-count
设置动画重复次数，可以指定 infinite 无限次重复动画

animation-name
指定由@keyframes描述的关键帧名称。

animation-play-state
允许暂停和恢复动画。

animation-timing-function
设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。

animation-fill-mode
指定动画执行前后如何为目标元素应用样式。

根据@keyframes与这些animation子属性，实现的示例效果如下

最终效果项目地址为：https://github.com/zengpang/GroundGlass-UI-Modules/tree/master/Dialog
最终效果预览地址为：https://zengpang.github.io/GroundGlass-UI-Modules/Dialog/Dialog.html