vue js 好玩的简单的特效 可扩展的动画卡片

        

<div class="cardbox">
			<div :class="linstindex === index ? 'cad2':'cad1'" @click="cad(index)" v-for="(item,index) in list"
				:key="index" v-bind:style="{ 'background-image': 'url(' + item.img + ')', }">
			</div>
		</div>

 

<script>
	export default {
		data() {
			return {
				list: [{
						img: 'https://gd-hbimg.huaban.com/9ede6b7ffbfbcef23400e03548900d76480774abae24e-p4SdeM_fw658webp',
						cla:'run'
					},
					{
						img: 'https://gd-hbimg.huaban.com/9ede6b7ffbfbcef23400e03548900d76480774abae24e-p4SdeM_fw658webp',
						cla:'run'
					},
					{
						img: 'https://gd-hbimg.huaban.com/9ede6b7ffbfbcef23400e03548900d76480774abae24e-p4SdeM_fw658webp',
						cla:'run'
					}

				],
				linstindex: '',
				num: 0,
				
			}
		},
		mounted() {
		},
		methods: {
			
			cad(index) {
				if(this.linstindex === index){
					if (this.num % 2 != 0) {
						console.log(1)
						this.linstindex = index
					} else {
						this.linstindex = ''
						console.log(2)
					}
					// this.num++
					console.log(this.num,'num')
				}else{
					this.linstindex = index
				}
			}
		}
	}
</script>

.cardbox {
		width: 100vw;
		height: 50vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.cad1 {
			width: 20vw;
			height: 40vh;
			margin-left: 2vw;
			animation-name: zun;
			animation-duration: 1s;
		}

		.cad2 {
			width: 30vw;
			height: 40vh;
			margin-left: 2vw;
			animation-name: run;
			animation-duration: 1s;
		}

		@keyframes run {
			from {
				width:20vw ;
			}

			to {
				width:30vw ;
			}

		}
		@keyframes zun {
			from {
				width:30vw ;
			}
		
			to {
				width:20vw ;
			}
		
		}

	}