vue+css3+定时器，实现依次动画；解决vue弹出层不消失问

1.这是通过css vue js 实现动画效果，依次缩放的效果

依次缩放.gif

2.这是对图片添加一个hover的效果，图片放大，里面的线框变色

hover.gif

3.这是解决，vue中点击除链接4之外其他位置让浮层消失

点击.gif

完整代码如下

<template>
    <div id="addara" >

        <ul class="oul">

            <li v-for="item in datas" :key="item.id" @click="tan(item.id)">
                {{item.name}}</li>
            <div class="box" v-if="shows">

            </div>
        </ul>
        <ul class="content">
            <li  :class="{donghua:donghuavalue1}">  // 给li绑定一个class，通过donghuavalue1来控制是否添加这个class
                <!-- <img src="" alt=""> -->
            </li>
            <li  :class="{donghua:donghuavalue2}">
                
            </li>
            <li  :class="{donghua:donghuavalue3}">
                
            </li>
        </ul>
        


    </div>
</template>

<script>
// import { setTimeout, setInterval } from 'timers';
export default {
    data() {
        return {
            shows:false,
            donghuavalue1:true,
            donghuavalue2:false,
            donghuavalue3:false,
            datas:[
               { name:"链接1",id:1},
               { name:"链接2",id:2} ,
               { name:"链接2",id:3} ,
               {name:"链接4",id:4}
            ]

        };
    },
    mounted() {
        this.documentClick();
        this.donghua()
       
    },
    methods: {
        tan(id){
            if(id==4){
                this.shows=!this.shows  // 显示或者隐藏
            }else{
                this.shows=false
            }
        },
        documentClick(){   // 监听页面点击事件  有时候addEventListener不起作用，这是因为addEventListener默认是事件冒泡false,这时候加个true就是事件捕获，就可以了
            document.addEventListener('click',(e)=>{
                if(e.srcElement && e.srcElement.innerText=="链接4"){
                     
                }else{
                     this.shows=false
                }


            }，false)
        },
        donghua(){             //设置间隔，2500毫秒之后依次改变data，然后改变class,实现依次动画
            var that=this;
            setInterval(()=>{
                if(that.donghuavalue1==true){
                setTimeout(()=>{
                  that.donghuavalue1=false;
                  that.donghuavalue2=true;
                    if(that.donghuavalue2==true){
                        setTimeout(()=>{
                            that.donghuavalue2=false;
                            that.donghuavalue3=true;
                            if(that.donghuavalue3==true){
                                setTimeout(()=>{
                                    that.donghuavalue3=false;
                                    that.donghuavalue1=true;
                                },2500)
                            }
                        },2500)        

                    }                
                },2500)  
            }
            })
        }
    },
    components: {

    },
};
</script>

<style scoped >
#addara{
    width: 100%;
    height: 60px;
    background: blue;
}
.oul{
    display: flex;
    justify-content:space-around;
    color: aliceblue;
    line-height: 60px;
    position: relative;
}
.box{
    width: 100px;
    height: 80px;
    background: #000;
    position: absolute;
    top: 60px;
    right: 100px;
}
.content {
    display: flex;
    justify-content: space-around;
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    
}
.content li{
    width: 200px;
    height: 150px;
    background: url("../../static/1.jpg");
}
.content li:hover{
    background: url("../../static/1big.jpg");  // hove改变路径，这个图片上的线框颜色是高亮的
    transform: scale(1.2)
}

@keyframes mymove{
        0%{
        transform: scale(1);  /*开始为原始大小*/
        }
        25%{
            transform: scale(1.1); /*放大1.1倍*/
        }
        50%{
            transform: scale(1);
        }
        75%{
            transform: scale(1.1);
       }
}
.donghua{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
    animation-direction:alternate;/*轮流反向播放动画。*/
    animation-timing-function: ease-in-out; /*动画的速度曲线*/   
}

</style>