Vue学习笔记进阶篇之单元素过度

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

包括以下工具：

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

单元素/组件的过度

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

1. 条件渲染 （使用 v-if）
2. 条件展示 （使用 v-show）
3. 动态组件
4. 组件根节点

这里是一个典型的例子：

<div id="app1">
  <button @click="show = !show">toggle</button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

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

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

运行结果如下：

点击toggle按钮会看见文字淡入淡出的效果。

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

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和Vue的 nextTick 概念不同)

过度的CSS类名

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
5. v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。

对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="my-transition" 可以重置前缀，比如 v-enter 替换为 my-transition-enter。

CSS过度

常用的过渡都是使用 CSS 过渡。以下为示例代码。

<div id="app2">
  <button @click="show = !show">toggle css</button>
  <transition name="slide-fade">
    <p v-if="show">CSS 过渡</p>
  </transition>
</div>

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

    .slide-fade-enter-active{
      transition: all .3s ease;
    }
    .slide-fade-leave-active{
      transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
    .slide-fade-enter, .slide-fade-leave-to{
      transform: translateX(100px);
      opacity: 0;
    }

运行结果

点击按钮就会看到动画效果。

CSS动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

示例： (省略了兼容性前缀)

<div id="app3">
  <button @click="show = !show">toggle css</button>
  <transition name="bounce">
    <p v-if="show">css 动画</p>
  </transition>
</div>

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

    .bounce-enter-active{
      animation: bounce-in .5s;
    }
    .bounce-leave-active{
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0%{
        transform: scale(0);
      }
      50%{
        transform: scale(1.5);
      }
      100%{
        transform: scale(1);
      }
    }

运行结果：

自定义过渡类名

我们可以通过以下特性来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (>= 2.1.8 only)
• leave-class
• leave-active-class
• leave-to-class (>= 2.1.8 only)

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

<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
<div id="app4">
  <button @click="show = !show">toggle coustom class</button>
  <transition name="bounce"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight">
    <p v-if="show">自定义过渡类名</p>
  </transition>
</div>

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

运行结果：

animate.css的学习可以参考官网：https://daneden.github.io/animate.css/

javascript钩子

可以在属性中声明 JavaScript 钩子

<transition
 v-on:before-enter="beforeEnter"
 v-on:enter="enter"
 v-on:after-enter="afterEnter"
 v-on:enter-cancelled="enterCancelled"
 v-on:before-leave="beforeLeave"
 v-on:leave="leave"
 v-on:after-leave="afterLeave"
 v-on:leave-cancelled="leaveCancelled">
 <!-- ... -->
</transition>

methods: {
 // --------
 // 进入中
 // --------
 beforeEnter: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 enter: function (el, done) {
  // ...
  done()
 },
 afterEnter: function (el) {
  // ...
 },
 enterCancelled: function (el) {
  // ...
 },
 // --------
 // 离开时
 // --------
 beforeLeave: function (el) {
  // ...
 },
 // 此回调函数是可选项的设置
 // 与 CSS 结合时使用
 leave: function (el, done) {
  // ...
  done()
 },
 afterLeave: function (el) {
  // ...
 },
 // leaveCancelled 只用于 v-show 中
 leaveCancelled: function (el) {
  // ...
 }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候， 在 enter和leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

一个使用 Velocity.js 的简单例子：

<div id="app5">
  <button @click="show = !show">toggle hook</button>
  <transition @before-enter="beforeEnter"
  @enter="enter"
  @leave="leave"
  :css="false">
    <p v-if="show">javascript 钩子使用</p>
  </transition>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script >
new Vue({
  el:'#app5',
  data:{
    show:false
  },
  methods:{
    beforeEnter:function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter:function (el, done) {
      Velocity(el, {opacity:1, fontSize:'1.4em'}, {duration:300})
      Velocity(el, {fontSize:'1em'}, {complete:done})
    },
    leave:function (el, done) {
      Velocity(el, {translateX:'15px', rotateZ:'50deg'}, {duration:600})
      Velocity(el, {rotateZ:'100deg'}, {loop:2})
      Velocity(el,{
        rotateZ:'45deg',
        translateY:'30px',
        translateX:'30px',
        opacity:0
      }, {complete:done})
    }
  }
})
</script>

运行结果：

初始渲染的过度

可以通过appear 特性设置节点的在初始渲染的过渡

这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名。

<transition
 appear
 appear-class="custom-appear-class"
 appear-to-class="custom-appear-to-class"
 appear-active-class="custom-appear-active-class">
 <!-- ... -->
</transition>

自定义 JavaScript 钩子：

<transition
 appear
 v-on:before-appear="customBeforeAppearHook"
 v-on:appear="customAppearHook"
 v-on:after-appear="customAfterAppearHook"
 v-on:appear-cancelled="customAppearCancelledHook"
>
 <!-- ... -->
</transition>

示例代码：

<!--初始渲染-->
<div id="app6">
  <transition appear
        appear-active-class="animated tada">
    <p>初始画面</p>
  </transition>
</div>

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

运行结果：

在界面加载该元素时，会有个过渡效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Vue  # 单元素过度  # 详解vue过度效果与动画transition使用示例  # 深入理解Vue的过度与动画  # 详解Vue中过度动画效果应用  # Vue中transition标签的基本使用教程  # vue中transition组件在项目中运用小结  # Vue transition实现点赞动画效果的示例  # vue使用transition组件动画效果的实例代码  # Vue transition过渡组件详解  # 移除  # 自定义  # 第三方  # 是在  # 回调  # 过程中  # 于此  # 被插  # 画中  # 都是  # 是一个  # 他们的  # 就会  # 有个  # 将在  # 我们可以  # 这也  # 可以通过  # 用了  # 下一 

相关文章： 如何在IIS中新建站点并配置端口与IP地址？  开封网站制作公司,网络用语开封是什么意思？  如何快速生成可下载的建站源码工具？  小捣蛋自助建站系统：数据分析与安全设置双核驱动网站优化  企业宣传片制作网站有哪些,传媒公司怎么找企业宣传片项目？  企业网站制作费用多少,企业网站空间一般需要多大，费用是多少？  整蛊网站制作软件,手机不停的收到各种网站的验证码短信,是手机病毒还是人为恶搞?有这种手机病毒吗？  建站之星安装失败：服务器环境不兼容？  ,网页ppt怎么弄成自己的ppt？  如何在万网自助建站平台快速创建网站？  c++怎么用jemalloc c++替换默认内存分配器【性能】  如何通过虚拟机搭建网站？详细步骤解析  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  如何快速查询网址的建站时间与历史轨迹？  车管所网站制作流程,交警当场开简易程序处罚决定书，在交警网站查询不到怎么办？  如何在服务器上三步完成建站并提升流量？  高防服务器租用指南：配置选择与快速部署攻略  如何快速登录WAP自助建站平台？  安云自助建站系统如何快速提升SEO排名？  小型网站制作HTML,*游戏网站怎么搭建？  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  建站之星如何一键生成手机站？  如何通过VPS建站实现广告与增值服务盈利？  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  建站主机选哪家性价比最高？  定制建站流程解析：需求评估与SEO优化功能开发指南  长沙做网站要多少钱,长沙国安网络怎么样？  建站之星logo尺寸如何设置最合适？  建站VPS推荐：2025年高性能服务器配置指南  建站之星手机一键生成：多端自适应+小程序开发快速建站指南  php能控制zigbee模块吗_php通过串口与cc2530 zigbee通信【介绍】  建站VPS选购需注意哪些关键参数？  如何在Golang中使用encoding/gob序列化对象_存储和传输数据  如何在Windows 2008云服务器安全搭建网站？  公司门户网站制作流程,华为官网怎么做？  黑客如何通过漏洞一步步攻陷网站服务器？  广州网站建站公司选择指南：建站流程与SEO优化关键词解析  学校为何禁止电信移动建设网站？  陕西网站制作公司有哪些,陕西凌云电器有限公司官网？  如何在宝塔面板创建新站点？  定制建站哪家更专业可靠？推荐榜单揭晓  如何选择高性价比服务器搭建个人网站？  浙江网站制作公司有哪些,浙江栢塑信息技术有限公司定制网站做的怎么样？  中山网站制作网页,中山新生登记系统登记流程？  网站微信制作软件,如何制作微信链接？  如何通过免费商城建站系统源码自定义网站主题与功能？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  高端建站如何打造兼具美学与转化的品牌官网？  c++怎么实现高并发下的无锁队列_c++ std::atomic原子变量与CAS操作【详解】  如何在云主机快速搭建网站站点？