欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 08:25:30
概述 vue 在插入、更新或者移除 dom 时,提供多种不同方式的应用过渡效果。 包括以下工具: 在 css 过渡和动画中自动应用 class 可以...

概述

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

的学习可以参考官网:

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

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

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