关于animation:实现多个元素的css动画同时执行

8次阅读

共计 776 个字符，预计需要花费 2 分钟才能阅读完成。

css 动画是队列式的，以后一个动画执行完才会执行下一个动画，也就是你删除了动画类名，认为革除了动画，其实只是将动画暂停而已，想要动画每次都是从新开始的解决办法是，在 css 里再写一个截然不同的动画，两个动画类名来回切换就能每次从新开始了，比方：

<template>
 <div>
    <div v-for="(item,index) in list" :key="index" :class="[active===index?'':show?'changeColor':'changeColor2']"@click="changeColor(index)"> 色彩 </div>
 </div>
</template>
<script>
   export default{
     name:"color",
     data(){
      return {
        list:[{name:"a"},
         {name:"b"},
         {name:"c"}
        ],
        show:true,
        active:0
      }
     }
    methods:{changeColor(){
       this.active=index;
       this.show=!this.show
     }
    
    }
   }
</script>
<style>
@keyframes colors {
    0%{color: red}
    100% {color: yellow}
  }
@keyframes colors2 {
    0%{color: red}
    100% {color: yellow}
  }
  .changeColor {
    animation:colors 5s linear 0s infinite;
    -webkit-animation:colors 5s linear 0s infinite;
  }
  .changeColor2 {
    animation:colors2 5s linear 0s infinite;
    -webkit-animation:colors2 5s linear 0s infinite;
  }
</style>

正文完