v-for下定时给图片添加动画

我就不思

已于 2022-03-03 10:32:21 修改

阅读量487

点赞数 2

分类专栏： CSS VUE UNIAPP 文章标签： vue.js 前端 javascript

于 2022-03-02 17:56:28 首次发布

本文链接：https://blog.csdn.net/weixin_45788691/article/details/123236280

版权

UNIAPP 同时被 3 个专栏收录

55 篇文章 8 订阅

订阅专栏

VUE

50 篇文章 0 订阅

订阅专栏

CSS

21 篇文章 1 订阅

订阅专栏

需求：在vue中v-for遍历图片列表依据index时定时给图片添加动画！
效果图：
在这里插入图片描述
.VUE

<div class="a01_header">
	<img 
	   v-for="(items,index) in a01_header" 
	   :key="index" 
	   :class="selectIndex == index ? 'add_animation':''"
	   :src=items.img_url />	
</div>

.JS

data: {
    a01_header: [
		{img_url: './img/01/imgs/a01.png'},
		{img_url: './img/01/imgs/a02.png'},
		{img_url: './img/01/imgs/a03.png'},
		{img_url: './img/01/imgs/a04.png'},
		{img_url: './img/01/imgs/a05.png'}
	],
	selectIndex:0
},
mounted: function() {
	setInterval(() =>{
		this.getMethon();
	},2000)
},
getMethon(){
	const { a01_header } = this;
	let len = a01_header.length,
		index = this.selectIndex;
	if (index + 1 == len) {
		this.selectIndex = 0
	} else {
		this.selectIndex = index + 1;
	}
}

.CSS

.add_animation{
	animation: scaleBtn 2s infinite ease-in-out;
}
@keyframes scaleBtn {

  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}