Vue中transition的使用

transition

用法

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

<!-- 简单元素 -->
<transition>
    <div v-if="ok">toggled content</div>
</transition>

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
    <component :is="view"></component>
</transition>

<!-- 事件钩子 -->
<div id="transition-demo">
    <transition @after-enter="transitionComplete">
        <div v-show="ok">toggled content</div>
    </transition>
</div>

new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // 传入 'el' 这个 DOM 元素作为参数。
    }
  }
  ...
}).$mount('#transition-demo')

Props

• name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
• appear - boolean，是否在初始渲染时使用过渡。默认为 false。
• css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
• type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
• mode - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
• duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
• enter-class - string
• leave-class - string
• appear-class - string
• enter-to-class - string
• leave-to-class - string
• appear-to-class - string
• enter-active-class - string
• leave-active-class - string
• appear-active-class - string

事件

• before-enter
• before-leave
• before-appear
• enter
• leave
• appear
• after-enter
• after-leave
• after-appear
• enter-cancelled
• leave-cancelled (v-show only)
• appear-cancelled

transition-group

用法

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。

注意，每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作

<transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。如果 CSS transform property 是“可过渡”property，当应用移动类时，将会使用 FLIP 技术 使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
    <li v-for="item in items" :key="item.id">
        {{ item.text }}
    </li>
</transition-group>

Props

• tag - string，默认为 span
• move-class - 覆盖移动过渡期间应用的 CSS 类。
• 除了 mode，其他 attribute 和 <transition> 相同。

事件

• 事件和 <transition> 相同。