如何在Vue中构建可重用的Transition

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

如果我们可以将它们封装到组件中,并且在多个项目中重用,是不是会给我们带来更多的益处呢?在前面两篇文章中,我们了解了在Vue中怎么使用transitionanimation,今天我们来学习几种定义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>

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

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-js-reusable-transitions.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部