Vue 过渡（未）

原文

#当从 DOM 中插入、更新或移除项目时，Vue 提供多种应用过渡效果的方式。包括以下工具：

• 在 CSS 过渡和动画中自动处理 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

#当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

• 自动嗅探目标元素是否使用了 CSS 过渡或动画，如果使用，会在合适的时机添加/移除 CSS 过渡 class。

• 如果过渡组件设置了 JavaScript 钩子函数，这些钩子函数将在合适的时机调用。

• 如果没有检测到 CSS 过渡/动画，并且也没有设置 JavaScript 钩子函数，插入和/或删除 DOM 的操作会在下一帧中立即执行。（注意：这里的帧是指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同）

#Vue 提供了 transition 外层包裹容器组件(wrapper component)，可以给下列情形中的任何元素和组件添加进入/离开(enter/leave)过渡

• 条件渲染（使用 v-if）
• 条件展示（使用 v-show）
• 动态组件
• 组件根节点

#过渡类名

• v-enter：进入式过渡(entering transition)的开始状态。在插入元素之前添加，在插入元素之后一帧移除。

• v-enter-active：进入式过渡的激活状态。应用于整个进入式过渡时期。在插入元素之前添加，过渡/动画(transition/animation)完成之后移除。此 class 可用于定义进入式过渡的 duration, delay 和 easing 曲线。

• v-enter-to：仅适用于版本 2.1.8+。进入式过渡的结束状态。在插入元素之后一帧添加（同时，移除 v-enter），在过渡/动画完成之后移除。

• v-leave：离开式过渡(leaving transition)的开始状态。在触发离开式过渡时立即添加，在一帧之后移除。

• v-leave-active：离开式过渡的激活状态。应用于整个离开式过渡时期。在触发离开式过渡时立即添加，在过渡/动画(transition/animation)完成之后移除。此 class 可用于定义离开式过渡的 duration, delay 和 easing 曲线。

• v-leave-to：仅适用于版本 2.1.8+。离开式过渡的结束状态。在触发离开式过渡之后一帧添加（同时，移除 v-leave），在过渡/动画完成之后移除。

单元素过渡

1. css过渡

<div id="myDiv">
  <button @click="show = !show">点击查看变化</button>
  <transition name="fade">      //fade 名字是可以更换的
    <div v-if="show">
        请看我的变化
    </div>
  </transition>

</div>

.fade-enter-active,.fade-leave-active {
    transition: all 1s linear;
}
.fade-enter,.fade-leave-active {
   opacity: 0;
   transform:translateX(50px);
}

new Vue({
    el:"#myDiv",
    data:{
        show:true
    }
})

2. 设置css动画（将上面的css改为如下）

.fade-enter-active{
     animation:Ado .5s ease-in;
 }
 @keyframes Ado{
       0%{transform:scale(0.5,0.5);}
       60%{transform:scale(1,1);}
       80%{transform:scale(1.5,1.5);}
       100%{transform:scale(1,1);}
 }
 .fade-leave-active{
     animation:Bdo .5s ease-in;
 }
 @keyframes Bdo{
       0%{transform:scale(1,1);}
       60%{transform:scale(1.5,1.5);}
       80%{transform:scale(1,1);}
       100%{transform:scale(0.5,0.5);}

 }

3. 自定义过渡类 ：自定义过渡类就不需要 中的name属性了。类名可以是自己随意起，也可引入第三方动画库animate.css, 但是需要在 加入一些添加类名的属性 ，如：

• enter-class=类名
• 在引入第三方动画库 animate.css 时 以上属性要先添加 animated 类， 在添加 动画类名，例如：
  enter-class=”animated hinge “

<div id="myDiv">
   <button @click="show = !show">点击我</button>
     <!-- 这里要加上 animated 才会有效果 (第一个是我自己写的类名，不用加，但是引入animate.css 需要在前面加animate) -->
 <transition
    leave-active-class="achange"  
    enter-active-class="animated hinge"
  >
     <p v-if="show">看我的变化</p>
 </transition>      

</div>

.achange{
   animation:Ado .5s ease-in;
 }
 @keyframes Ado{
       0%{transform:scale(0.5,0.5);}
       60%{transform:scale(1,1);}
       80%{transform:scale(1.5,1.5);}
       100%{transform:scale(1,1);}
 }

new Vue({
    el:"#myDiv",
    data:{
        show:true
    }
})