用vue实现简单的箭头动画效果

最新推荐文章于 2024-05-13 10:52:32 发布

½.org

最新推荐文章于 2024-05-13 10:52:32 发布

阅读量2.5k

点赞数 1

分类专栏：前端文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_53402277/article/details/117327653

版权

Vue 动画效果箭头图标 CSS样式 JavaScript

关键词由CSDN通过智能技术生成

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用vue实现简单的箭头动画效果

代码如下：

代码如下：

<template>
    <el-main>
        <i class="el-icon-caret-right" id="a1"></i>
        <i class="el-icon-caret-right" id="a2"></i>
        <i class="el-icon-caret-right" id="a3"></i>
        <i class="el-icon-caret-right" id="a4"></i>
        <i class="el-icon-caret-right" id="a5"></i>
        <i class="el-icon-caret-right" id="a6"></i>
    </el-main>
</template>

<script>
export default {
    data() {
        return {
            single:1,
            count:0,
            list:['a1','a2','a3','a4','a5','a6']
        }
    },

    mounted(){
        this.move()
    },

    methods: {
        move(){
            var test = setInterval(() => {
                let a = document.getElementById(this.list[this.count])
                if(this.single%2!=0){
                    a.style.color = "white"
                }
                if(this.single%2==0){
                    a.style.color = "black"
                }
                this.count = this.count+1
                if(this.count==6){
                    this.count=0
                    this.single=this.single+1
                }
                if(this.single==3){
                    clearInterval(test)
                }
            }, 200);
        }
    }
}
</script>