vue transition 探究

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

Transition 组件通常有三类用法：CSS 过渡，CSS 动画和 JavaScript 钩子。

• CSS 过渡：CSS 过渡主要定义了一些过渡的 CSS 样式，当我们点击按钮切换文本显隐的时候，就会应用这些 CSS 样式，实现过渡效果。

<template>
    <div class="app">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        }
    }
</script>

<style>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity 0.5s ease;
    }

    .fade-enter-from,
    .fade-leave-to {
        opacity: 0;
    }
</style>

• CSS 动画：和 CSS 过渡类似，CSS 动画主要定义了一些动画的 CSS 样式，当我们去点击按钮切换文本显隐的时候，就会应用这些 CSS 样式，实现动画效果。

<template>
    <div class="app">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @before-leave="beforeLeave"
            @leave="leave"
            css="false"
        >
            <p v-if="show">hello</p>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        },
        methods: {
            beforeEnter(el) {
                el.style.opacity = 0
                el.style.transition = 'opacity 0.5s ease'
            },
            enter(el) {
                this.$el.offsetHeight
                el.style.opacity = 1
            },
            beforeLeave(el) {
                el.style.opacity = 1
            },
            leave(el) {
                el.style.transition = 'opacity 0.5s ease'
                el.style.opacity = 0
            }
        }
    }
</script>

• JavaScript 钩子：Transition 组件也允许在一个过渡组件中定义它过渡生命周期的 JavaScript 钩子函数，我们可以在这些钩子函数中编写 JavaScript 操作 DOM 来实现过渡动画效果。

<template>
    <div class="app">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @before-leave="beforeLeave"
            @leave="leave"
            css="false"
        >
            <p v-if="show">hello</p>
        </transition>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show: true
            }
        },
        methods: {
            beforeEnter(el) {
                el.style.opacity = 0
                el.style.transition = 'opacity 0.5s ease'
            },
            enter(el) {
                this.$el.offsetHeight
                el.style.opacity = 1
            },
            beforeLeave(el) {
                el.style.opacity = 1
            },
            leave(el) {
                el.style.transition = 'opacity 0.5s ease'
                el.style.opacity = 0
            }
        }
    }
</script>

我们不难发现都是在点击按钮时，通过修改 v-if 的条件值来触发过渡动画的。其实 Transition 组件过渡动画的触发条件有以下四点：条件渲染 (使用 v-if)、条件展示 (使用 v-show)、动态组件、组件根节点。

所以只能在上述四种情况中使用 Transition 组件。

Transition 组件的实现其实可以分成组件的渲染、钩子函数的执行、模式的应用三个部分看待，其中最重要的就是组件的渲染。

还有要注意，Transition 组件内部只能嵌套一个子元素节点。