当前位置:网站首页>Add animation to the picture under V-for timing

Add animation to the picture under V-for timing

2022-04-23 17:43:00 Front Thoughts

demand : stay vue in v-for Traverse picture list by index Add animation to the picture at regular intervals !
design sketch :
 Insert picture description here
.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;
  }
}

版权声明
本文为[Front Thoughts]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230551156725.html