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 相关文章推荐
javascript 精粹笔记
May 09 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
Nov 02 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
Jun 12 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
vue小白入门教程
Apr 02 Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 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
受疫情影响 动画《Re从零开始的异世界生活》第二季延期至7月
2020/03/10 日漫
从手册去理解分析PHP session机制
2011/07/17 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
JS实现标签滚动切换效果
2017/12/25 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
Python命令行解析模块详解
2018/02/01 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
django 实现后台从富文本提取纯文本
2020/07/02 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
认购协议书范本
2014/04/22 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年服务员工作总结
2015/04/08 职场文书
检讨书范文大全
2015/05/07 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
浅析Django接口版本控制
2021/06/26 Python
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技