vue内置组件-transtion

一、动画过渡

关于动画部分，一般是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

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：当前元素先进行过渡，完成之后新元素过渡进入。

秒客网

vue内置组件-transtion

相关文章