css入场动画

入场动画

需求：记录一次可视化页面小模块基于scss的入场动画制作
先上效果图

---


---

前言

可视化页面制作。直接放几个数据展示模块。看着效果不够理想。加入一些入场的动画效果。让整个页面交互看起来更加流畅。其实实现的方法有很多。这里使用了scss语法去实现这个效果。

---

主要是太懒，不想写一大堆js或者css🤭

第一种方式

代码如下（示例）：

<template>
    <div class="layout">
        <div class="menuBox" v-for="(item, index) in dataList" :key="index">
            {{item.name}}
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            dataList:[
                {
                    name:"菜单一"
                },
                {
                    name:"菜单二"
                },
                {
                    name:"菜单三"
                },
                {
                    name:"菜单四"
                },
                {
                    name:"菜单五"
                },
                {
                    name:"菜单六"
                }
            ]
        }
    },
    created() {
        
    },
}
</script>

scss代码如下（示例）：

<style lang="scss" scoped>
    .layout{
        @include box_flex($width:50%,$height:50%,$direction:column,$justify:flex-start,$align:flex-start);
        .menuBox{
            @include box_flex($width:30%,$height:auto,$direction:column,$justify:flex-start,$align:center,$flex-1:1);
            background: rgba(65, 248, 9,0.6);
            border: solid 1px rgb(0, 255, 55);
        }
        $delayTime:0.2s,0.4s,0.6s,0.8s,1.0s,1.2s;
        @each $t in $delayTime{
            $i:index($delayTime,$t);
            .menuBox:nth-child( #{$i} ){
                animation: move 3s $t;
            }
        }
        @keyframes move {
            0% {
                transform: translateX(-100%);
                opacity: 0;
            }
            100% {
                transform: translateX(0%);
                opacity: 1;
            }
        }
    }
</style>

---

第二种方式

<template>
    <div class="layout">
        <div class="menuBox" v-for="(item, index) in dataList" :key="index" :style="'animationDelay:'+index/10+'s'">
            {{item.name}}
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .layout{
        @include box_flex($width:50%,$height:50%,$direction:column,$justify:flex-start,$align:flex-start);
        overflow: hidden;
        .menuBox{
            @include box_flex($width:30%,$height:auto,$direction:column,$justify:flex-start,$align:center,$flex-1:1);
            background: rgba(65, 248, 9,0.6);
            border: solid 1px rgb(0, 255, 55);
            animation: move 3s;
        }
        @keyframes move {
            0% {
                transform: translateX(-100%);
                opacity: 0;
            }
            100% {
                transform: translateX(0%);
                opacity: 1;
            }
        }
    }
</style>

总结

第一种大概思路就是定义一个$delayTime的scss变量组。定义一个@keyframes。$delayTime 里定义动画执行等待时间。然后通过@each循环$delayTime。最后通过nth-child($delayTime[i] )去设置对应的动画等待时间。第二种就更加方便使用。在标签上结合for循环的index去设置animation-delay属性即可。