Vue的几种展开收缩动画

一、使用CSS

插入transition标签后，写下面样式

.router-slid-enter-active, .router-slid-leave-active {
  transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
  transform: translate3d(0, 3rem, 0);
  opacity: 0;
}

二、使用组件

创建ShrinkView.vue组件

<template>
    <div class="shrink-view" :style="{maxHeight: (mIsOpen?contentHeight:0) + 'px'}">
        <slot></slot>
    </div>
/template>

<script>
    export default {
        props: {
            value: Boolean
        },
        updated () {
            this.init();
        },
        mounted () {
            this.init();
        },
        methods: {
            init () {
                this.$nextTick(() => {
                    this.contentHeight = this.$el.scrollHeight;
                });
            }
        },
        watch: {
            value (newValue) {
                this.mIsOpen = newValue;
            },
            mIsOpen (newValue) {
                this.$emit('input', newValue);
            }
        },
        data () {
            return {
                contentHeight: 0,
                mIsOpen: this.value,
            }
        }
    }
</script>

<style scoped>
    .shrink-view {
        -webkit-transition-duration: 600ms;
        -moz-transition-duration: 600ms;
        -ms-transition-duration: 600ms;
        -o-transition-duration: 600ms;
        transition-duration: 600ms;
        overflow: hidden;
    }
</style>

在其它页面引入该组件

<template>
    <div>
        <h1>Vue实现收缩效果</h1>

        <input type="checkbox" v-model="open">

        <div style="border: 1px solid gray">
            <shrink-view v-model="open">
              内容
            </shrink-view>
        </div>

    </div>
</template>

<script>
    import ShrinkView from '../components/ShrinkView';

    export default {
        components: {
            ShrinkView
        },
        data () {
            return {
                open: false
            }
        }
    }
</script>