当前位置:网站首页>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 :
.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
边栏推荐
- PC电脑使用无线网卡连接上手机热点,为什么不能上网
- Element calculation distance and event object
- 394. String decoding - auxiliary stack
- Sword finger offer 03 Duplicate number in array
- [simple understanding of database]
- Open futures, open an account, cloud security or trust the software of futures companies?
- 01-初识sketch-sketch优势
- Oninput one function to control multiple oninputs (take the contents of this input box as parameters) [very practical, very practical]
- 102. Sequence traversal of binary tree
- [related to zhengheyuan cutting tools]
猜你喜欢
Learning record of uni app dark horse yougou project (Part 2)
双指针进阶--leetcode题目--盛最多水的容器
470. Rand10() is implemented with rand7()
关于gcc输出typeid完整名的方法
2021 Great Wall Cup WP
394. 字符串解码-辅助栈
Qt error: /usr/bin/ld: cannot find -lGL: No such file or directory
PC uses wireless network card to connect to mobile phone hotspot. Why can't you surf the Internet
JVM class loading mechanism
958. 二叉树的完全性检验
随机推荐
2022制冷与空调设备运行操作判断题及答案
Manually implement simple promise and its basic functions
394. 字符串解码-辅助栈
Future 用法详解
Using quartz under. Net core - calendar of [6] jobs and triggers
1217_使用SCons生成目标文件
PC电脑使用无线网卡连接上手机热点,为什么不能上网
Some questions some questions some questions some questions
JVM class loading mechanism
练习:求偶数和、阈值分割和求差( list 对象的两个基础小题)
How to use the input table one-way service to send (occupy less) picture files (body transmission)? FileReader built-in object involved
剑指 Offer 22. 链表中倒数第k个节点-快慢指针
92. Reverse linked list II byte skipping high frequency question
[ES6] promise related (event loop, macro / micro task, promise, await / await)
209. 长度最小的子数组-滑动窗口
JS implementation private attribute
Learning record of uni app dark horse yougou project (Part 2)
Leak detection and vacancy filling (VIII)
ros常用的函数——ros::ok(),ros::Rate,ros::spin()和ros::spinOnce()
嵌入式系统中,FLASH中的程序代码必须搬到RAM中运行吗?