vue.js框架过渡动画实现教程+案例

提到过渡和动画是不是会想起css和jquary中的过滤和动画。其实vue.js过渡和动画也一样，主要还是依靠css中的动画属性【animation】和转换属性【transform】来实现。只是vue.js使用的语法不同，甚至封装了组件来实现过渡效果。

既然用到css3的两个重要的属性，那让我们复习一下：

动画属性【animation】：

animation: name duration timing-function delay iteration-count direction;

Name:规定需要绑定到选择器的 keyframe 名称。
duration :规定完成动画所花费的时间，以秒或毫秒计。
timing-function:规定动画的速度曲线。
delay :规定在动画开始之前的延迟。
iteration-count:规定动画应该播放的次数。
Direction:规定是否应该轮流反向播放动画。

过渡属性【animation】：

transition: property duration timing-function delay;

property:规定设置过渡效果的 CSS 属性的名称。
duration :规定完成过渡效果需要多少秒或毫秒。
timing-function:规定速度效果的速度曲线。
delay :定义过渡效果何时开始。

一、过度与动画

语法格式：

<transition>
<div>需要过度的元素放这里</div>
</transition>

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

把需要实现过渡的元素放在<transition></transition>里面。

首先我们来看一个例子再结合例子分析和学习。

<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
transition: opacity 2s;
animation:entermove 5s infinite;
-webkit-animation:entermove 5s infinite; /*Safari and Chrome*/
}

.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
opacity: 0;
animation:leavemove 5s infinite;
-webkit-animation:leavemove 5s infinite; /*Safari and Chrome*/
}

@keyframes entermove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes entermove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}

@keyframes leavemove
{
from {left:200px;}
to {left:0px;}
}

@-webkit-keyframes leavemove /*Safari and Chrome*/
{
from {left:200px;}
to {left:0px;}
}

</style>
</head>
<body>
<div id = "databinding">
<button v-on:click = "show = !show">click me</button>
<transition name = "fade">
<p v-show = "show" v-bind:style = "styleobj"></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
width:50+'px',
height:50+'px',
background:'red',
position:'relative'
}
},
methods : {
}
});
</script>

效果：例子中初始点击【click me】的时候，红色方块颜色渐渐出现并且向右活动200px，当红色方块停止后，再次点击，红色方块渐渐消失并且向左边滑动200px。

把需要实现过渡动画的元素放入vue.js的模版transition
标签中，在点击【click me】的时候，实现过渡效果，这时候vue.js过渡组件会生成6个class来切换过渡的效果。

分别是：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave被删除)，在过渡/动画完成之后移除。

这6个class都是以v-为前缀，这是因为transition 标签没有设置属性【name】，如果设置了属性【name】,这6个class会以name-为前缀，比如<transition
name=”mypage”>, 那么class名为mypag-leave。

二、与css过渡动画库结合使用

除此之外，为了能很好的与第三方的动画库结合使用，vue.js允许使用自定义过渡的类名来使用第三方过渡样式。

自定义过渡名：就是上面提到的6个class后面加上后缀-class。

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

比如：

和第三方过渡动画https://daneden.github.io/animate.css/结合。

例如：

<div id = "databinding">
<button v-on:click = "show = !show">click me</button>
<transition 
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-show = "show" v-bind:style = "styleobj"></p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show:true,
styleobj :{
width:50+'px',
height:50+'px',
background:'red',
position:'relative'
}
},
methods : {
}
});
</script>

只需要在<transition></transition >中增加上面提到的自定义样式属性就可以用到第三方的过渡动画效果。是不是很方便呢！

三、同时使用过渡和动画

在项目中，你可能很多情况下都要使用同时使用过渡和动画，但transition动画和transform动画时长不一样，存在的情况是动画完成了而过渡还没完成，我们需要的是两个同时完成。那就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

例如：

<transition 
type='transition' 
:duration="{enter:5000,leave:5000}"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-show = "show" v-bind:style = "styleobj"></p>
</transition>

type=’transition’以transition动画时长为准，也可以设置:duration，type=’transition’与:duration=”5000″ 二选一，不能同时使用。

四、JavaScript 钩子

另外，还可以在<transition></transition>中设置钩子。什么意思？就是可以在属性中使用v-on绑定钩子函数，再次编辑触发元素的事件。

注意：在 enter 和
leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

例如：

<transition 
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave">
<p v-show = "show" v-bind:style = "styleobj"></p>
</transition>


methods : {
beforeEnter:function(){
console.log('我出现了');
},
enter:function(el,done){
console.log('我在哪');
done();
},
leave:function(el,done){
console.log('我离开了');
done();
}

当初始时，红色块是显示的，所以点击【click me】时，会执行leave( )钩子函数，红方块消失，再次点击的时候执行beforeEnter()和enter()函数。

五、多个元素的过渡

过个元素一起过渡动画时，为了让vue.js，区分是哪个元素，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们。

例如：

<transition 
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if='show' key='hello' v-bind:style = "styleobj">hello</p>
<p v-else key='bye' v-bind:style = "styleobj">bye</p>
</transition>