vue2 实现抛物线动画

要实现抛物线动画，可以利用Vue2的动画特性和CSS3的变形属性。以下为实现抛物线动画的步骤：

1. 在Vue组件中添加一个元素，作为抛物线动画的目标元素。

2. 在该元素上添加一个用于触发动画的事件，比如点击事件。

3. 在该Vue组件的`<style>`标签或引入的CSS文件中，定义抛物线动画的关键帧。

4. 在Vue组件的`<style>`标签或引入的CSS文件中，将抛物线动画应用到目标元素的类选择器上。

5. 在Vue组件的`methods`中，编写触发动画的方法。该方法将在点击事件中调用。

6. 在该方法中，通过给目标元素添加动态类名，即在点击事件中通过`this.$set`为目标元素添加一个新类名。

7. 在Vue组件的`mounted`生命周期钩子函数中，监听目标元素的类名变化。

8. 当目标元素的类名变为添加动态类名时，执行抛物线动画。

9. 在抛物线动画结束后，将目标元素的类名还原为原始类名，以便下次触发动画。

总之，通过Vue2的动画特性和CSS3的变形属性，我们可以实现抛物线动画效果。在Vue组件中监听事件，通过改变目标元素的类名，触发动画。动画结束后，将目标元素的类名还原，以实现循环播放的效果。