如何在Vue中重置CSS动画

Question

我有一个这样的清单：

var v = new Vue({
  'el' : '#app',
  'data' : {
    'list' : [1,2,3,4,5,6,7,8,9,10]
  },
  
  methods: {
    activateClass($event){
      $event.target.classList.remove('animate');
      void $event.target.offsetWidth;
      $event.target.classList.add('animate');
    },
    changeRandomValue(){
      var randomAmount = Math.round(Math.random() * 12);
      var randomIndex = Math.floor(Math.random() * this.list.length);
      Vue.set(this.list, randomIndex, randomAmount)
    }
  },
  
  mounted(){
    var vm = this;
    setInterval(function(){
      vm.changeRandomValue();
    }, 500);
  }
})

.animate{
  animation: fade 0.5s;
}

@keyframes fade{
  0% { background:blue; }
  100% { background:white; }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <ul>
    <li v-for="item in list" v-html="item" @click="activateClass($event)"></li>
  </ul>
</div>

如果您运行上面的代码段，您会看到如果您点击它，它将使用此代码：

activateClass($event){
  $event.target.classList.remove('animate');
  void $event.target.offsetWidth;
  $event.target.classList.add('animate');
}

向其添加一次类并播放动画（https://css-tricks.com/restart-css-animation/）。真棒！

现在，我还有一个changeRandomValue()函数，它从列表数组中选择一个元素并更改其值。

我如何使用activateClass方法内的changeRandomValue方法？

我对在元素上使用事件有一些想法，所以它会像：

<li v-for="item in list" v-html="item"
    @click="activateClass($event)"
    @myValueChanged="activateClass($event)"
></li>

但我不认为这样的事情存在。我也一直在关注观察者，但我认为这不是他们的真正目的。

使用已单击的元素并查找引用的数据我没有问题，但我无法弄清楚如何获取已更改的数据，然后找到它的dom引用。

我没有使用类绑定的原因是我需要触发重排。也许有一种非常简单的方法可以用vue做到这一点，但我不知道它。

Answer 1

一个简单的解决方案是使用class bindings和the animationend事件 您还可以以编程方式触发相同的解决方案，如mounted事件中所示。

＆＃13;

＆＃13;

new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      highlight: false
    }, {
      id: 2,
      highlight: false
    }]
  },
  mounted() {
    // Demonstrate programmatic highlighting
    setTimeout(() => {
      this.items[1].highlight = true
      setTimeout(() => {
        this.items[1].highlight = true
      }, 1000)
    }, 1000)
  },
  methods: {
    addClass(item) {
      item.highlight = true
    },
    removeClass(item) {
      item.highlight = false
    }
  }
})

＆＃13;

p {
  cursor: pointer;
}

.animate {
  animation: fade 0.5s;
}

@keyframes fade {
  0% {
    background: blue;
  }
  100% {
    background: white;
  }
}

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p v-for="item in items" v-bind:class="{ animate: item.highlight }" v-on:click="addClass(item)" v-on:animationend="removeClass(item)">{{ item.id }}</p>
</div>

＆＃13;

＆＃13;

＆＃13;