css - 如何在 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>

如果你运行上面的代码片段，你会看到如果你点击一个 li 它将使用这个代码:

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

向其添加一个类并播放动画 ( https://css-tricks.com/restart-css-animation/ )。太棒了!

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

如何在 changeRandomValue 方法内部使用 activateClass 方法？

我有一些关于在元素上使用事件的想法，所以它会是这样的:

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

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

我可以轻松获取已单击的元素并找到它引用的数据，但我不知道如何获取已更改的数据然后找到它的 dom 引用。

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

Answer 1

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

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
    }
  }
})

p {
  cursor: pointer;
}

.animate {
  animation: fade 0.5s;
}

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

<script src="https://unpkg.com/vue@2"></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>