【VUE】动画封装使用说明

不是Null
243 阅读2分钟

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

一、前提

如果部分效果在页面里应用较多，可以对该类动画进行封装，让代码可复用，以方便日后调用。

二、步骤

  1. 首先创建基础动画，即简单的显隐切换动画，如下所示：
<button type="button" @click="handleClick">切换效果</button>
<transition>
        <div v-if="show">内容显示与隐藏</div>
</transition>
var vm = new Vue({
    el: '#app',
    data: function() {
            return {
                    show: true
            }
    },
    methods: {
            handleClick: function() {
                    this.show = !this.show
            }
    }
})
  1. 封装动画组件：将要封装的内容写成组件，并用slot插槽接管组件内容，使用props传值，就能实现动画封装了。具体代码如下：
<style>
.v-enter,
.v-leave-to {
        opacity: 0;
}
.v-enter-active,
.v-leave-active {
        transition: opacity 1s;
}
</style>
<child :show="show">
    <div>内容显示与隐藏</div>
</child>
Vue.component('child', {
        props: ['show'],
        template: `
        <transition>
        <slot v-if="show"></slot>
        </transition>`
})

上述动画采用的是css方式，如果想把样式也一起封装该怎么实现呢？这里就要用到js动画了。

Vue.component('child', {
    props: ['show'],
    template: `
    <transition @before-enter="handleBeforeEnter" @enter="handleEnter" >
    <slot v-if="show"></slot>
    </transition>`,
    methods:{
            handleBeforeEnter(el) {
                    el.style.color = '#000'
            },
            handleEnter(el, done) {
                    setTimeout(() => {
                            el.style.color = 'red';
                            done
                    },1000)
            }
    }
})

上面代码用了js提供的钩子动画before-enter、enter、after-enter，用这种方法写，所有的动画都写在了组件里，外部只需要调用这个child组件就可以了，也不需要全局去写一些样式了，这种动画的封装是比较推荐的一种动画封装，因为它可以把所有动画的实现完整的封装在一个组件中。

三、使用

动画效果完全封装在一个名为的组件中，如果要复用，只需要复制有其组件名的部分，然后修改dom元素的内容。

<child :show="show">
    <div>内容1显示与隐藏</div>
</child>
<child :show="show">
    <div>内容2显示与隐藏</div>
</child>

四、总结

动画封装的目的是进行可复用。

使用方法是：局部组件传递数据+局部组件中使用JS动画。

原理是：将可复用的动画效果封装在一个自定义组件中，当需要使用时，只需复制有其组件名的部分，然后修改dom元素标签名称。使用任何样式，只需要从组件中进行相应地修改，无需再在全局中定义CSS动画。

avatar
文章
阅读
粉丝