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


Posted in Javascript onJuly 19, 2017

概述

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;
}

运行结果如下:

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

点击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 完成之后移除。

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

对于这些在 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;
    }

运行结果

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

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

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);
      }
    }

运行结果:

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

自定义过渡类名

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

  • 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
  }
})

运行结果:

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

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>

运行结果:

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

初始渲染的过度

可以通过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学习笔记进阶篇之单元素过度

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js原型继承的两种方法对比介绍
Mar 30 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
JS使用正则表达式验证身份证号码
Jun 23 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用require.js与angular搭建spa应用的方法实例
Jul 19 #Javascript
ztree简介_动力节点Java学院整理
Jul 19 #Javascript
Angular 1.x个人使用的经验小结
Jul 19 #Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 #Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 #Javascript
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
2012/02/03 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
Angularjs的键盘事件的绑定
2017/07/27 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
python中的sort方法使用详解
2014/07/25 Python
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
浅谈Python NLP入门教程
2017/12/25 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
Python读入mnist二进制图像文件并显示实例
2020/04/24 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
Nginx快速入门教程
2021/03/31 Servers
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Java 死锁解决方案
2022/05/11 Java/Android