Vue深度学习-过渡效果

Posted BluesQian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue深度学习-过渡效果相关的知识,希望对你有一定的参考价值。

简介

通过 Vue.js 的过渡系统,你可以轻松的为 DOM 节点被插入/移除的过程添加过渡动画效果。Vue 将会在适当的时机添加/移除 CSS 类名来触发 CSS3 过渡/动画效果,你也可以提供相应的 javascript 钩子函数在过渡过程中执行自定义的 DOM 操作。

  以 v-transition="my-transition 这个指令为例,当带有这个指令的 DOM 节点被插入或移除时,Vue 将会:

  1.用 my-transition这个 ID 去查找是否有注册过的 JavaScript 钩子对象。这个对象可以是由 Vue.transition(id, hooks) 全局注册,或是通过 transitions选项定义在当前的组件内部。如果找到此对象,则会在过渡动画不同的阶段调用相应的钩子。

  2.自动探测目标元素是否应用了 CSS 过渡效果或者动画效果,并在适当的时机添加/移除 CSS 类名。

  3.如果没有提供 JavaScript 钩子函数,也没有检测到相应的 CSS 过渡/动画效果,DOM 的插入/移除会在下一帧立即执行。

<div v-if="show" transition="my-transition"></div>

所有的 Vue.js 过渡效果只有在该 DOM 操作是通过 Vue.js 触发时才会生效。触发的方式可以是通过内置指令,比如 v-if,或是通过 Vue 实例的方法,比如 vm.$appendTo()

CSS 过渡

一个典型的 CSS 过渡效果定义如下:

<div v-if="show" v-transition="expand">hello</div>

然后为.expand-transition.expand-enter 和.expand-leave 添加 CSS 规则:

/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}

另外,可以提供 JavaScript 钩子:

Vue.transition(‘expand‘, {
  beforeEnter: function (el) {
    el.textContent = ‘beforeEnter‘
  },
  enter: function (el) {
    el.textContent = ‘enter‘
  },
  afterEnter: function (el) {
    el.textContent = ‘afterEnter‘
  },
  enterCancelled: function (el) {
    // handle cancellation
  },
  beforeLeave: function (el) {
    el.textContent = ‘beforeLeave‘
  },
  leave: function (el) {
    el.textContent = ‘leave‘
  },
  afterLeave: function (el) {
    el.textContent = ‘afterLeave‘
  },
  leaveCancelled: function (el) {
    // handle cancellation
  }
})

说简单点就是我们在操作某个元素时,当v-if的值为发生变化时,就会引起transition的变化,从而使的CSS样式改变。

过渡的CSS类名

类名的添加和切换取决于 transition特性的值。比如 transition="fade",会有三个 CSS 类名:

  1).fade-transition 始终保留在元素上。

  2).fade-enter 定义进入过渡的开始状态。只应用一帧然后立即删除。

  3).fade-leave 定义离开过渡的结束状态。在离开过渡开始时生效,在它结束后删除。

  如果 transition 特性没有值,类名默认是 .v-transition, .v-enter 和 .v-leave

过渡流程详解

根据我们第一节中的代码来讲解过渡流程:

  当 show 属性改变时,Vue.js 将相应地插入或删除div元素,按照如下规则改变过渡的 CSS 类名:

  如果 show 变为 falseVue.js 将:

  1.  beforeLeave 钩子;
  2. 添加 v-leave 类名到元素上以触发过渡;
  3. 调用 leave 钩子;
  4. 等待过渡结束(监听 transitionend 事件);
  5.  DOM 中删除元素并删除 v-leave 类名;
  6. 调用 afterLeave 钩子。

  如果 show 变为 trueVue.js 将:

    1. 调用 beforeEnter 钩子;
    2. 添加 v-enter 类名到元素上;
    3. 把它插入 DOM
    4. 调用 enter 钩子;
    5. 强制一次CSS 布局,让 v-enter 确实生效。然后删除 v-enter 类名,以触发过渡,回到元素的原始状态;
    6. 等待过渡结束;
    7. 调用afterEnter钩子。

渐近过渡

transition 与 v-for 一起用时可以创建渐近过渡。给过渡元素添加一个特性 stagger, enter-stagger 或 leave-stagger, 如下代码:

<div v-for="list" transition stagger="100"></div>

或者,提供一个钩子 stagger, enter-stagger 或 leave-stagger,以更好的控制. 如下代码:

Vue.transition(‘stagger‘, {
  stagger: function (index) {
    // 每个过渡项目增加 50ms 延时
    // 但是最大延时限制为 300ms
    return Math.min(300, index * 50)
  }
})

如下实例html代码:

<div id="demo">
    <input v-model="query">
    <ul>
        <li v-for="item in list | filterBy query"
            transition="staggered"
            stagger="100">
          {{item.msg}}
         </li>
    </ul>
</div>

js代码:

 new Vue({
    el: ‘#demo‘,
    data: {
        query: ‘‘,
        list: [
            { msg: ‘Bruce Lee‘ },
            { msg: ‘Jackie Chan‘ },
            { msg: ‘Chuck Norris‘ },
            { msg: ‘Jet Li‘ },
            { msg: ‘Kung Fury‘ }
        ]
    }
})

CSS代码:

ul {
    padding-left: 0;
    font-family: Helvetica, Arial, sans-serif;
}
.staggered-transition {
    transition: all .5s ease;
    overflow: hidden;
    margin: 0;
    height: 20px;
}
.staggered-enter, .staggered-leave {
    opacity: 0;
    height: 0;
}

以上代码的效果为:当我们在文本框中输入值时,会看到列表逐渐消失,删除内容时,会看到列表显示。

 

以上是关于Vue深度学习-过渡效果的主要内容,如果未能解决你的问题,请参考以下文章

译如何使用Vue过渡效果来提升用户体验

40 Vue3制作动画过渡效果

Vue中的动画效果

Vue:vue-router路由

前端框架Vue学习的心得记录(过渡&动画)

vue个人学习----过渡动画