Vue+css用上v-for命令和:style=“{}“-实现信息一条一条出现的动画效果~~

使用的东西就不讲其他了，流程如下,最后有 总结 和 注意点 的贴士。

首先是定义一个动画

在中

@keyframes sliding-box{

        0%{ transform:translateY(100%);opacity:0; }

        10%{ opacity:0; }

        90%{ opacity:1; }//此时走了90%的距离，差不多该显现了

        100%{ transform:translateY(0);opacity:1; }//最后到达原位

}

然后给消息盒子设置动画效果，注意选择器中不要使用'-'，否则之后:class="{}"中用不了，因为不允许，可以小驼峰命名

.info-box{

        xxxxx;

        opacity:0; //开始就要设置opacity:0;因为动画是延时触发的，不设置则会出现本来就出现了，然后忽然消失又出现的奇怪视觉效果。

        animation:sliding-box 1s ease-out 1s forwards; //forwards设置的是执行完毕后是动画最后的状态，不然最开始

        // animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

}

然后在模板中即

在中的相应盒子中使用，如：

然后在方法中写上

在的methods:{}中

getAnimationDelay(){

        return `{index*0.5}s`//注意使用的是模板字符串，{}中可以放表达式，还注意外头跟了个 s 为单位,0.5是间隔出现的秒数，自行决定

}

        animationDelay在CSS选择器中设置时是这样写的一个属性：animation-delay:延迟秒数s;

不过:style"{}"中不让有符号 '-' ，但是提供了animationDelay作为同等效果的属性。

我用的是vue2写的，如果有机会，我会更新vue3的写法，大体思想上应该大差不差

思想是

定义动画，给盒子设置动画，和opacity:0;最初为隐身状态，且因此动画属性中要设置forwards，即动画执行完毕后以状态为动画最终状态，即100%{}中所设置的opacity:1;且位置为动画完毕所处位置即transform:translateY(0);的状态。

v-for="(item,index) in 5" 由于这里还没有迭代的数据，就没写:key=""，实际开发中，还是要记得写上:key=""然后里面建议写item.id，因为id是唯一的。v-for默认行为会尝试原地修改元素，比如从上到下有三个盒子，第一个有背景为orange,后面俩没有，但删除时，即把第一个盒子中数据删除后，实际上少的是最后一个盒子，然后后面的数据填到前两个盒子里来了。也就是这个橙色的盒子还在，这就叫原地修改元素。

v-for=""和其:key=""写好后，写:style="{animationDelay:getAnimationDelay(index)}"方法里的参数用index是因为index是从0开始，有顺序的每次加一。恰好符合进行计算相应延时然后呈现消息的需求

然后写方法，方法中采用模板字符串，用``括住，{}中可以写表达式,{}外面是字符串，方便且好用

getAnimationDelay(index):{

        return `{index*距上一条消息出现间隔时长比如0.5}s`

}

亮点是配合opacity控制盒子的显现，通过index结合:style=""和animationDelay属性实现租个显现的效果。需要注意的是animation属性要设置forwards，否则动画结束后回归盒子设置了的opacity:0;的状态，导致盒子动画结束，盒子隐身。

另外，我发现微信小程序中，这个动画只有最开始点进页面是才执行一次。可能有办法实现在微信小程序中每次进入本页面都执行动画效果~或许和微信小程序的声明周期有关...

如有改进或更好的建议，十分欢迎指出。