用vue20写一个按钮动画

以下是一个简单的Vue2.0按钮动画示例：

HTML：

<div id="app">
  <button v-on:click="animate" v-bind:class="{ 'animated': animating }">Click Me</button>
</div>

Vue实例：

new Vue({
  el: '#app',
  data: {
    animating: false
  },
  methods: {
    animate: function() {
      // 将animating设置为true以启动动画
      this.animating = true;
      
      // 2秒钟后将animating设置为false以停止动画
      setTimeout(() => {
        this.animating = false;
      }, 2000);
    }
  }
});

CSS：

/* 引入animate.css库 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* 按钮动画样式 */
.animated {
  animation-duration: 2s;
  animation-name: heartBeat;
}

/* 可以根据需要自定义按钮样式 */
button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #3e8e41;
}

在此示例中，我们使用了animate.css库提供的heartBeat动画，当用户单击按钮时，我们将animating属性设置为true以启动动画，然后在2秒后将其设置为false以停止动画。在CSS中，我们使用了animated类来应用动画