《风尚坐火箭学习vue》-- 第十二章：Vue中的动画transition

前言：前端框架千千万，独有vue占一半

我是风尚，让我们一起坐火箭去学习Vue

---

《风尚坐火箭学习vue》-- 第十二章：Vue中的动画transition

上章回顾：“好了，今天就讲这摸多”老头说道。。。

---

"好家伙，这可够我消化一段时间了"风尚叹气的说道。

“小伙子，我相信你啊。你练习会，我一会给你讲Vue的动画效果，有意思的很.”老头坚定的看着风尚。

“啊？”风尚有点，蒙圈了...

时间一点点过去，“来吧，风尚，开始整动画”老头说。风尚蒙圈了，硬着头皮听。

---

动画

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

语法

<transition name="过渡名称">    <div></div> </transition>

简单列子

<div id="demo">   <button v-on:click="show = !show">     Toggle   </button>   <transition name="fade">     <p v-if="show">hello</p>   </transition> </div>

new Vue({   el: '#demo',   data: {     show: true   } })

.fade-enter-active, .fade-leave-active {   transition: opacity .5s; } .fade-enter, .fade-leave-to {   opacity: 0; }

过渡的类名 

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

CSS 动画 html

<div id="app">       <button @click="flag=!flag">切换</button>       <div>         <transition name="fade">                <img src="img/sun.jpg" height="260" v-show="flag" alt="">         </transition>       </div>     </div>

js

new Vue({   el:"#app",   data:{flag:true},   methods:{}, })

css

@keyframes fadeIn{   0%{ opacity: 0; transform:scale(0.7)}   90%{opacity: .8;transform:scale(1.2)}   100%{opacity: 1;transform:scale(1)} } @keyframes fadeOut{   from{ opacity: 1; transform:scale(1)}   to{opacity: 0;transform:scale(0.7)} } .fade-enter-active{   animation: fadeIn .7s ease; } .fade-leave-active{   animation: fadeOut .2s ease; }

自定义过渡的类名

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

html

<div id="app">   <button @click="flag=!flag">切换</button>   <div>     <transition enter-active-class="animated rotateIn" leave-active-class="animated bounceOutDown">          <img src="img/sun.jpg" height="260" v-show="flag" alt="">     </transition>   </div>    </div>

js

new Vue({   el:"#app",   data:{flag:true}, })

导入其他css类库

<link rel="stylesheet" href="css/animate.min.css">

动画模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。

• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<div id="app">      <transition name="fade" mode="out-in">            <button v-if="!flag" @click="flag=!flag" :key="'off'">off</button>     <button v-if="flag" @click="flag=!flag" :key="'on'">on</button>   </transition>   </div>

new Vue({   el:"#app",   data:{flag:true} })

@keyframes fadeIn{   0%{ opacity: 0;}         100%{opacity: 1;} } @keyframes fadeOut{   from{ opacity: 1;}   to{opacity: 0;} } .fade-enter-active{   animation: fadeIn .7s ease; } .fade-leave-active{   animation: fadeOut .2s ease; }

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们

动画组

怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 组件

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。

<transition-group name="slide" tag="ul">          <li class="item p15" v-for="(item,index) in listing" :key="item"> </li></transition-group>

/* 定义进 的关键帧动画*/ @keyframes slideIn{   from{ opacity: 0; transform: translateY(-80px);}   to{opacity: 1; transform: translateY(0px);} } /* 定义出 的关键帧动画*/ @keyframes slideOut{   from{ opacity: 1; transform: translateX(0);}   to{opacity: 0; transform: translateX(-100%);} } /*enter-active 进入时候添加class名称*/ .slide-enter-active{   animation: slideIn .5s ease; } /*离开的时候添加的class 名称*/ .slide-leave-active{   animation: slideOut .3s ease;   position: absolute; } /*正在移动元素 添加的class名称（vue 内置添加的）*/ .slide-move{   transition: all .3s ease; }

---

v-move 特性，它会在元素的改变定位的过程中应用
v-move 对于设置过渡的切换时机和过渡曲线非常有用 

今天的Vue中的动画transition就讲到这里啊。