vue可复用slide动画

vue创建可复用的slideUp和slideDown动画组件

template结构

<template>
    <transition
        name="laoq-transition-collapse"
        mode="out-in"
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @before-leave="beforeLeave"
        @leave="leave"
        @after-leave="afterLeave"
    >
        <slot>slot>
    transition>
template>

script代码

util.js

'use strict';

const LaoqUtil = {
    addClass(ele, cls) {
        if (!ele || !cls) return;

        cls = cls.trim();
        let cur_class = ele.className;

        cls.split(' ').forEach(item => {
            if (!item) return true;

            if (ele.classList) {
                ele.classList.add(item);
            } else {
                cur_class += ' ' + item;
            }
        });

        !ele.classList && (ele.className = cur_class);
    },

    removeClass(ele, cls) {
        if (!ele || !cls) return;

        cls = cls.trim();
        let cur_class = ' ' + ele.className + ' ';
        cls.split(' ').forEach(item => {
            if (!item) return true;

            if (ele.classList) {
                ele.classList.remove(item);
            } else {
                cur_class = cur_class.replace(' ' + item + ' ', '');
            }
        });

        !ele.classList && (ele.className = cur_class.trim());
    },

    getCSS(ele, prop) {
        return window.getComputedStyle(ele, null).getPropertyValue(prop) || '';
    }
};

export default LaoqUtil;

collapse.less

.laoq-transition-collapse {
    -webkit-transition: height 0.4s ease-in-out, padding-top 0.4s ease-in-out,
        padding-bottom 0.4s ease-in-out;
    -moz-transition: height 0.4s ease-in-out, padding-top 0.4s ease-in-out,
        padding-bottom 0.4s ease-in-out;
    transition: height 0.4s ease-in-out, padding-top 0.4s ease-in-out,
        padding-bottom 0.4s ease-in-out;
}

 

测试

<template>
    <div>
        <div style="margin:20px 0;">
            <laoq-button @click="click">slidelaoq-button>
        div>

        <laoq-transition-collapse>
            <div class="main" v-show="show">
                我是DIV<br/>我是DIV<br/>我是DIV<br/>
            div>
        laoq-transition-collapse>
    div>
template>

<script>
import LaoqTransitionCollapse from '../components/transition/collapse/collapse.vue';

export default {
    components:{
        LaoqTransitionCollapse
    },
    data() {
        return {
            show: true
        };
    },
    methods: {
        click() {
            this.show = !this.show;
        }
    }
}
script>

<style lang="less" scoped>
.main {
    width: 200px;
    padding:50px;
    text-align: center;
    color: #fff;
    background: #17a2b8;
}
style>

效果