vue中动画的使用

vue能够实现的动画效果只有淡入淡出和位移

首先，需要了解vue动画实现的过渡类名，官网可查看具体内容。https://cn.vuejs.org/v2/guide/transitions.html

需要注意的是

想要实现动画的部分，在完场动画类的定义之后，使用<transition></transition>包裹就可以了

这些类名需要写在style里面。然后用起来就和css有点像了transform:translateX(10px);用来实现位移。opacity透明度，transition: all .3s ease;实现动画时的过渡效果。

用 v-巴拉巴拉 定义的类效果会实现在所有用<transition></transition>包裹的标签上，这时可以给你的动画效果“起个名字”。比如，<transition name="liyuchun"></transition>,此时你需要使用 liyuchun-巴拉巴拉 定义你的类名 这样就可以解决动画独特化的目的了。

可以配合使用第三方 CSS 动画库，如 Animate.css

animate.css有多种引入方式，我比较偏向于以下其中两种。想要了解annmate.css，这个是个不错的网址https://www.cnblogs.com/xiaohuochai/p/7372665.html

1.直接官方下载之后直接应用https://raw.github.com/daneden/animate.css/master/animate.css 

2.使用npm安装 $ npm install animate.css

在成功一引入animate.css之后，你就不需要在写动画类了，但是同样需要使用transition标签包裹，你可以直接这样使用。

<transition enter-active-class="animated 上半场效果名" leave-active-class="animated 下半场效果名">

<div>你好</div>

</transition>

animated 是基本的类必须加上，或者将其放在元素身上

<transition enter-active-class="上半场效果名" leave-active-class="下半场效果名">

<div class="animated">你好</div>

</transition>

其中还有一个属性，可以定义入场和离场动画的时间 :durantion="毫秒"

<transition enter-active-class="上半场效果名" leave-active-class="下半场效果名" :durantion="400">

<transition enter-active-class="上半场效果名" leave-active-class="下半场效果名" 

:durantion="{enter:400,leave:200}">

其一，定义出场动画和入场动画均为400ms。其二，以对象的形式分别定义出场动画为400ms,离场动画为200ms

js钩子函数华丽丽登场，在一些场景下我们只要实现半场动画，这时候就需要使用钩子函数了，写在js标签下的哦。transition标签通过事件绑定已达到和方法勾结的效果，

触发钩子函数 钩子函数