在Vue中的transition和animation都是一些很棒的东东。它们可以让我们的组件带有一定的动效效果。在《Vue的transition》和《Vue的animation》中分别学习了transition和animation在Vue组件中的运用。这两个特性可以让Web元元素可以像animation.css库中提供的效果一样，实现一些过渡甚至是简单的动画效果。让整个效果看起来很好。

如果我们可以将它们封装到组件中，并且在多个项目中重用，是不是会给我们带来更多的益处呢？在前面两篇文章中，我们了解了在Vue中怎么使用transition和animation，今天我们来学习几种定义transtion的方法，并且深入研究它们可以真正重用的方法。

创建Vue项目

为了节省大家更多的时间，在这篇文章中咱们直接使用Vue Cli的来构建演示项目:

vue create vue-transitions

因为我们将会涉及多个使用transition方法，在这里通过相关的分支来区分。

git checkout -b demo1

接下来进入实际的案例中，以来阐述Vue中如何构建可重用的transition。

示例项目Github对应的地址在这里。

原始的transition组件和CSS

在《Vue的transition》一文中，我们了解到，在Vue中定义transition最简单的方法是使用Vue中的<transition>和<transition-group>。这需要为它们定义一个name和一些CSS。比如：

<!-- transitionDemo.vue -->
<template>
    <div class="demo">
        <div class="toggle toggle--text">
            <input type="checkbox" id="toggle--text" class="toggle--checkbox">
            <label class="toggle--btn" for="toggle--text" data-label-on="show"  data-label-off="hidden" @click="toggle"></label>
        </div>

        <transition name="fade">
            <p v-if="show">Hello W3cplus (^_^) !!!</p>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'transitionDemo',
        data () {
            return {
                show: true
            }
        },
        methods: {
            toggle() {
                this.show = !this.show
            }
        }
    }
</script>

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

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

/* === 默认样式省略 == */
</style>

点击按钮，你将看到的效果如下：

看起来很容易，对吧？然而，这种方法有一个问题。这个过渡效果不能在另一个项目中重用。

封装一个transition组件

如果我们将前面逻辑封装成一个Vue组件，将会发生什么情况呢？同样的，把Git分支切换到demo2中。接着我们创建一个FadeTransition.vue组件。

<!-- FadeTransition.vue -->
<template>
    <transition name="fade">
        <slot />
    </transition>
</template>

<script>
    export default {
        name: 'FadeTransition'
    }
</script>

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

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

该组件很简单，和Vue基本的<transition>几乎类似，不同之处是该组件使用了slot。在使用FadeTransition组件时，可以通过slot传递你想要的内容。比如：

<!-- App.vue -->
<template>
    <div id="app">
        <div class="toggle toggle--text">
                <input type="checkbox" id="toggle--text" class="toggle--checkbox">
                <label class="toggle--btn" for="toggle--text" data-label-on="show"  data-label-off="hidden" @click="toggle"></label>
            </div>

        <FadeTransition>
            <div class="box" v-if="show"></div>
        </FadeTransition>
    </div>
</template>

<script>
    import FadeTransition from './components/FadeTransition'

    export default {
        name: 'app',
        components: {
            FadeTransition
        },
        data () {
            return {
                show: true
            }
        },
        methods: {
            toggle () {
                this.show = !this.show
            }
        }
    }
</script>

这个时候看到的效果如下：