vue内置组件-transtion

时间:2022-12-21 13:29:43

一、动画过渡

关于动画部分,一般是css3的transtion、transform和animation,这部分可以参考w3school上的内容。

二、vue的内置组件

vue的内置组件一共有五个(截至到目前vue2.x),这里主要介绍的是过渡组件<transition>和<transition-group>(官方文档)。

1、常用情形

  • 条件渲染 v-if
  • 条件显示 v-show
  • 动态组件 <component :is="xxx">
  • 组件根节点

2、<transition>的渲染

<transition name="fade">
    <p v-if="show">test</p>
</transtion>
new Vue({
   el:"#demo",
   data(){
        return{
            show: true;
        }
    } 
}) 
.fade-enter-active, .fade-leave-active{
  transition: all 1s ease-in-out;  
}

.fade-enter, .fade-leave-to{
  opacity: 0;  
}

vue内置组件-transtion

3、<transition>的标签属性、事件

vue内置组件-transtion

vue内置组件-transtion

4、<transition-group>

<transition>可用于渲染v-if,v-show,v-if/v-else的元素,但是渲染v-if/v-else时如果是同名标签(如都是<div>)也需要指明key值

<transition-group>用于渲染v-for的元素,如整个列表的渲染,但是渲染时每个子节点都应该有自己的key值

vue内置组件-transtion

三、钩子函数

<transition>和<transition-group>都有自己的事件属性,可以使用v-on指令指定对应的js函数

<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 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

 四、过渡模式

在vue的transition组件中,离开和进入是同时发生的,这意味着两个元素会同时存在一段时间,如果想避免这种情况,可以使用过渡模式<transition mode='in-out'>来渲染,过渡模式有以下两种:

  • in-out:新元素先进行过渡,完成之后当前元素过渡离开。

  • out-in:当前元素先进行过渡,完成之后新元素过渡进入。