通过GASP让vue实现动态效果实例代码详解
单页应用及支持它们的前端框架提供了一个很好的机会，可以为程序设计提供令人惊叹的交互层，本文，我们将了解vue.js及如何集成GASP动画库来添加令人惊叹的动画效果。
Vue.js是一个功能强大且易掌握的JS框架，在VueCLI的帮助下，我们能够快速构建具有所有最新Webpack功能的应用程序，而无需花费时间来配置webpack，只需安装VueCLI，在重大上输入:create
GASP是一个JavaScript动画库，它支持快速开发高性能的Web动画。GASP使我们能够轻松轻松快速的将动画串在一起，来创造一个高内聚的流畅动画序列。
在构建新的DailyFire主页时，我为了演示产品如何工作而使用了大量动画，但是通过GASP的方式（不是GIF或视频），我可以为动画添加交互层使它们更具吸引力。如你所见，将GASP与vue相结合是简单且强大的，
让我们看看如何使用GASP与VUE实现简单的时间轴，我们将在本文使用.vue文件，这些文件由webpack的vue-loader加载使用，通过VueCLI创建的项目将会自动
基础
让我们先编写一些标记，以便了解我们将制作的动画
我们将一个红色box绘制到DOM中，注意div标签上的ref标记，当我们在引入GASP后通过该属性可以引用该元素。VUE通过组件的$refs属性使通过ref标记的元素可以使用。
现在引入GASP
首先，我们从GASP中引入TimelineLite，然后，当组件挂载后，我们通过$refs获取到对box元素的引用。然后我们初始化GASP的时间线实例来播放动画。
Timeline实例暴露出一个to方法，我们传递三个参数给该方法：
- 参数1：要设置动画效果的元素
- 参数2：动画运行的秒数
- 参数3：描述动画行为的对象
下面链接展示了一小段代码展示的运行效果：
https://codepen.io/smlparry/pen/rZdbEw
很简单，有木有！接下来让我们用GASP的EasePack赋予这个小动画更多的生命。使用ease缓动特效是一种简单的方案，它将使你的动画特效不再那么僵硬，更加友好。当然，如果你没有将你的动画放进队列中，你将不能充分利用好GASP的时间线，让我们在动画的运行中途将其由红框过渡为绿框。