当前位置:网站首页>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
边栏推荐
- 一些问题一些问题一些问题一些问题
- Flash project cross domain interception and DBM database learning [Baotou cultural and creative website development]
- 239. 滑动窗口最大值(困难)-单向队列、大顶堆-字节跳动高频题
- 关于gcc输出typeid完整名的方法
- Compare the performance of query based on the number of paging data that meet the query conditions
- For the space occupation of the software, please refer to the installation directory
- Kubernetes 服务发现 监控Endpoints
- Header built-in object
- Indexes and views in MySQL
- 198. Looting - Dynamic Planning
猜你喜欢
干货 | 快速抽取缩略图是怎么练成的?
Flash project cross domain interception and DBM database learning [Baotou cultural and creative website development]
1217_ Generating target files using scons
编译原理 求first集 follow集 select集预测分析表 判断符号串是否符合文法定义(有源码!!!)
uni-app黑马优购项目学习记录(下)
PC电脑使用无线网卡连接上手机热点,为什么不能上网
MySQL进阶之索引【分类,性能分析,使用,设计原则】
PC uses wireless network card to connect to mobile phone hotspot. Why can't you surf the Internet
QT modification UI does not take effect
Applet learning notes (I)
随机推荐
Gets the time range of the current week
flink 学习(十二)Allowed Lateness和 Side Output
Where is the configuration file of tidb server?
Solution of Navicat connecting Oracle library is not loaded
209. Minimum length subarray - sliding window
【Appium】通过设计关键字驱动文件来编写脚本
JS parsing and execution process
SiteServer CMS5. 0 Usage Summary
If you start from zero according to the frame
Leak detection and vacancy filling (VIII)
Using quartz under. Net core -- job attributes and exceptions of [4] jobs and triggers
Using quartz under. Net core - [1] quick start
198. Looting - Dynamic Planning
Metaprogramming, proxy and reflection
Indexes and views in MySQL
Come out after a thousand calls
嵌入式系统中,FLASH中的程序代码必须搬到RAM中运行吗?
On the method of outputting the complete name of typeID from GCC
[batch change MySQL table and corresponding codes of fields in the table]
圆环回原点问题-字节跳动高频题