当前位置:网站首页>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
边栏推荐
- JS implementation private attribute
- SiteServer CMS5. 0 Usage Summary
- MySQL进阶之索引【分类,性能分析,使用,设计原则】
- If you start from zero according to the frame
- Qt 修改UI没有生效
- Leak detection and vacancy filling (VIII)
- Ring back to origin problem - byte jumping high frequency problem
- Allowed latency and side output
- 油猴网站地址
- HCIP第五次实验
猜你喜欢
SystemVerilog (VI) - variable
958. 二叉树的完全性检验
How to change input into text
Chrome浏览器的跨域设置----包含新老版本两种设置
Compilation principle first set follow set select set prediction analysis table to judge whether the symbol string conforms to the grammar definition (with source code!!!)
Using quartz under. Net core -- operation transfer parameters of [3] operation and trigger
常用SQL语句总结
MySQL installation
SystemVerilog(六)-变量
练习:求偶数和、阈值分割和求差( list 对象的两个基础小题)
随机推荐
Using quartz under. Net core -- operation transfer parameters of [3] operation and trigger
Leak detection and vacancy filling (VII)
48. Rotate image
Collection of common SQL statements
2021长城杯WP
JS interview question: FN call. call. call. Call (FN2) parsing
JVM类加载机制
JS parsing and execution process
ros常用的函数——ros::ok(),ros::Rate,ros::spin()和ros::spinOnce()
Element calculation distance and event object
239. 滑动窗口最大值(困难)-单向队列、大顶堆-字节跳动高频题
JVM class loading mechanism
Qt error: /usr/bin/ld: cannot find -lGL: No such file or directory
31. Next arrangement
PC电脑使用无线网卡连接上手机热点,为什么不能上网
440. 字典序的第K小数字(困难)-字典树-数节点-字节跳动高频题
SQL optimization for advanced learning of MySQL [insert, primary key, sort, group, page, count]
In ancient Egypt and Greece, what base system was used in mathematics
常用SQL语句总结
Future 用法详解