在Vue中使用GSAP完成动画（二）动画初始设置

设置动画延迟时间

过渡效果的速度曲线，概念有点类似于 animation-timing-function

Tips: TweenLite中包含了基本缓动：Power0、Power1、Power2、Power3、Power4、Linear、Quad、Cubic、Quart、Quint、Strong，他们每个都含有.easeIn、.easeOut、.easeInOut参数（对于线性动画，请使用Power0.easeNone）。

而TweenMax在此基础上还另外增加了特殊缓动：Elastic、Back、Bounce、SlowMo、SteppedEase、RoughEase、Circ、Expo、Sine。

如果想在TweenLite中使用特殊缓动则需要加载缓动类easing/EasePack.min.js

如果设置为true，动画将在创建时立即暂停。默认false

是否立即渲染，默认为false

一般来说，TweenMax的运动对象会在下一个渲染周期前(也就是下一帧)被渲染到场景中，除非你设置了delay。如果想强制立即渲染，可以把这个参数设为true。

另外from()方法的运动对象是立即渲染的（默认true），如果你不想该运动对象被渲染，可以把这个参数设为false。

可以看到同样是3秒后从右边500px回到初始状态，绿色方块早已经在动画的 from 位置做好了等待，而橙色方块因为设置了不立即渲染，选择延迟结束以后就位!

用来控制同一个对象上有多个动画时的覆盖之类的情况

可以看到，一开始先执行 x:200 ， y:300 不被覆盖，3秒以后， overwrite 效果结束，覆盖失效，最后完成第一个动画剩下的3秒

最后两个属性这边先不做分析

当设置为true时，对这个TweenMax对象的时间计算方式基于帧而不是秒，一般帧速约为16.66ms（60帧/秒）

此处省略

动画在第一次完成后应重复的次数。例如，如果repeat为1，则动画将总共播放两次（初始播放加1次重复）。要无限期重复，请使用-1。repeat应该始终是一个整数。

每次重复之间的秒数（或帧）。例如，如果repeat是2并且repeatDelay是1，则动画将首先播放，然后在重复之前等待1秒，然后再次播放，然后再等待1秒再进行最后的重复

首次立即执行，第二次重复的动画，按照 repeatDelay 设定的值等待1秒以后，再次执行

如果设置yoyo为true，那么重复的动画将往返进行。默认为false

例如当你设置了repeat:2，如果没设置yoyo，那么动画是这样的123-123-123

如果设置了yoyo，动画则是123-321-123

控制动画返回的速度曲线，如果设置为 true ，回转速度曲线与 ease 的参数相同

设置动画属性开始时的值

设置动画从 x:200 开始，再到后面的 x:500

在stagger（错开）动画中设定属性组

虽然stagger限定了动画目标使用相同的属性（如 x:100, rotation:90 ），但你可以使用 cycle 来设定一个属性组（如 cycle:{x:[100,-100], rotation:[30,60,90]} ），还可使用function关键词（如 {x:function() { return Math.random() * 200}} ）

vue中使用动画必须要使用到 <transition>标签，将需要动画特效的标签用transition包裹着

栗子：

在图a中，animated必须要，然后再加上你想要的动画类名；

在进入/离开的过渡中，会有 6 个 class 切换。传送门： 官网查看

enter-class，enter-active-class，enter-to-class (2.1.8+)，leave-class，leave-active-class，leave-to-class (2.1.8+)

当应用了animate库时，又想自定义动画时，这时候可以如下图b所示enter-active-class,leave-active-class属性里添加自己的class类名，

然后去css定义自己的动画，时间上如果有冲突，则可用图b所示的解决方法 

前言：

VUEd窗动画建议不要参考官网封装好的的transition，本来很简单的一个需要，越看越晕。

先上源码，看不懂再往下看：

开发流程：

1.先写好一个不带动画的d窗组件，share_cover为遮罩DIV，share_content为内容DIV

2.（核心）

d窗动画，我们要给内容DIV的CSS加个animation属性。这里我们给animation设置了三个值：动画CSS名，时间，动画播放次数

3.动画CSS名，按照组件功能命名就行，动画效果在@keyframes里面配置

keyframes后面跟动画名，0%表示动画开始的DIV样式，会覆盖掉animation所在DIV的属性。

可以把0%当作vi-if=false时来理解，动画刚开始时候DIV的样式。

比如我们这里0%的时候bottom设置为-5.5rem,那么share_content里面的bottom会开始会被替换成-5.5rem.

5.同理，如果我们想把动画由从上到下换成从中间一个点展开，也是改keyframes

更多动画效果可以参考 这个 ，直接预览看里面的样式文件，拉倒keyframes那一块即可

---