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函数
Nov 20 Javascript
复制js对象方法(详解)
Jul 08 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
JS前端笔试题分析
Dec 19 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
python开发之for循环操作实例详解
2015/11/12 Python
python并发编程之线程实例解析
2017/12/27 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
Hotels.com印度:酒店预订
2019/05/11 全球购物
怀念母亲教学反思
2014/04/28 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2014年单位法制宣传日活动总结
2014/11/01 职场文书