javascript - 没有setTimeout的vue点击动画

Question

我想让一个 div 在用户点击它时闪烁。有没有不用手动运行 setTimeout 的解决方案？

setTimeout 解决方案:

应用.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<style>
div { transition: background-color 1s; }
div.flashing { background-color: green; transition: none; }
</style>

<div id="app" :class="{'flashing':flashing}" v-on:click="flash">flash when clicked</div>

应用程序.js

const data = { flashing: false }

new Vue({
  el: '#app',
  data,
  methods: { flash }
})

function flash() {
  data.flashing = true;
  setTimeout(() => data.flashing = false, 100);
}

Js fiddle :https://jsfiddle.net/ang3ukg2/

Answer 1

类似于Christopher's answer ，但在某种程度上更符合 Vue.这使用通过绑定(bind)类和 animationend 事件应用的 CSS 动画。

var demo = new Vue({
  el: '#demo',
  data: {
    animated: false
  },
  methods: {
    animate() {
      this.animated = true
    }
  }
})

<link href="https://unpkg.com/animate.css@3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@2.2.4/dist/vue.min.js"></script>
<div id="demo">
  <h1 :class="{'bounce animated': animated}" @animationend="animated = false">
    Animate Test
  </h1>
  <button @click="animate">
    Animate
  </button>
</div>

全部归功于Robert Kirsz who proposed the solution in a comment to another question .