1.需求:
有4个通过v-for生成的div,需要对第1个和第3个添加上划进入动画slideInUp,第2个和第4个添加下划进入动画slideInDown。
2.方法:
通过index%2==0判断元素位置,从而交叉添加动画效果,代码如下:
<div
v-for="(item, index) in List"
:key="index"
>
<div v-if="index % 2 == 0" class="animated slideInUp">
<div class="item">
...
</div>
</div>
<div v-else class="animated slideInDown">
<div class="item">
...
</div>
</div>
</div>
3.效果图