Vue过渡动画—Vue学习笔记
要求：要通过Vue使用过渡动画我们要把需要过度的元素放在<transition name='变量名'></transition>中。
原理：通过在特定的时刻增加/移除样式实现。
一、Vue中的过度效果
1.未声明name，Vue默认添加/移除v-enter,v-leave-to,v-enter-active,v-leave-active来实现
v-enter决定元素在加入dom时的样式
v-enter-active决定样式执行状态
v-leave-to对应移除的
实例：为元素添加显示隐藏的过度效果
<style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-active,.v-leave-active{ transition: opacity 1s; } </style> </head> <body> <div id="app"> <transition> <h3 v-if="show">Hi Boy</h3> </transition> <button @click="handleClick">DoIt</button> </div> </body> <script> var app=new Vue({ el:'#app', data:{ show:true }, methods:{ handleClick:function(){ this.show=!this.show } } }) </script>
2.如果声明了对应的name则可以改写为
css：
<style> .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active,.fade-leave-active{ transition: opacity 1s; } </style>
html：
<div id="app"> <transition name="fade"> <h3 v-if="show">Hi Boy</h3> </transition> <button @click="handleClick">DoIt</button> </div>
二、Vue中的动画效果
1.使用自定义动画
html不变，关键是css变为如下
@keyframes myfade{ from{opacity: 0} to{opacity: 1} } .fade-enter-active{ animation: myfade 1s; } .fade-leave-active{ animation: myfade 1s reverse; }
实现效果一样，此时我们用的动画，当然动画还有很多效果。
2.采用Animate.css库文件实现动画
使用库文件时我们需要知道除了通过那么调用的另一种调用方法
直接在class中自定义调用的样式
css：
@keyframes myfade{ from{opacity: 0} to{opacity: 1} } .enter{ animation: myfade 1s; } .leave{ animation: myfade 1s reverse; }
html：
<transition name="fade" enter-active-class="enter" leave-active-class="leave" > <h3 v-if="show">Hi Boy</h3> </transition>
此时的enter和leave时我们完全自定义的样式名。
如果向调用animate.css库只需要改写html
如下：
<transition name="fade" enter-active-class="animated bounce" leave-active-class="animated bounce" > <h3 v-if="show">Hi Boy</h3> </transition>
bounce未调用的动画名。提示前面必须加animated。
具体想要使用什么动画请看animate.css官网
提示：如果想要在页面初始化时播放动画需要添加appear和appear-active-class
<transition name="fade" appear enter-active-class="animated shake" leave-active-class="animated bounce" appear-active-class="animated shake" > <h3 v-if="show">Hi Boy</h3> </transition>
三、过度效果和动画效果混用
例子如下：
<style> @keyframes myfade{ from{opacity: 0} to{opacity: 1} } .fade-enter,.fade-leave-to{ opacity: 0; } .fade-enter-active,.fade-leave-active{ transition: opacity 3s; } </style> </head> <body> <div id="app"> <transition name="fade" appear enter-active-class="animated shake fade-enter-active" leave-active-class="animated bounce fade-leave-active" appear-active-class="animated shake" > <h3 v-if="show">Hi Boy</h3> </transition> <button @click="handleClick">DoIt</button> </div> </body>
警告：此时opacity过渡动画是3秒，animate.css动画未1秒，执行时间不统一。
解决方法：添加type属性如
type="transition" 以过度效果执行时间执行
type="animation"以动画效果执行时间执行
<transition name="fade" type="transition" appear enter-active-class="animated shake fade-enter-active" leave-active-class="animated bounce fade-leave-active" appear-active-class="animated shake" >
2.自定义动画时间
:duration="时长（毫秒）"一般定义
:duration="{enter:1000,leave:2000}"//分别定义出场和入场时长
<transition name="fade" :duration="10000" appear enter-active-class="animated shake fade-enter-active" leave-active-class="animated bounce fade-leave-active" appear-active-class="animated shake" > <h3 v-if="show">Hi Boy</h3> </transition>
