vue中元素高度auto的收起展開動畫

<!-- 
**** 說明：
****   使用css3的transition動畫來做
****	但是這個屬性只能用於固定高度的元素，所有在進行動畫之前就要手動的給這個元素設置一個高度值，這樣就能正常使用動畫了
****
****
-->
<template>
    <div>
        <button @click="fun_animate">
            <span v-if="!is_show">展開</span>
            <span v-if="is_show">收起</span>
        </button>
        <div class="child_right_slider transition_dom" ref="box">
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
        </div>
    </div>
</template>
<script>
var _this = null;
export default {
    data() {
        return {
            is_show: true,
            height: ""
        };
    },
    methods: {
        fun_animate: function() {
            if (_this.is_show) {
                this.$refs.box.style.height = "0";
            } else {
                this.$refs.box.style.height = _this.height;
            }
            _this.is_show = !_this.is_show;
        },
        fun_get_list: function() {
            // 1：網絡請求獲取數據後會把元素自動撐開，我們要做的就是讓這個元素做展開收起動畫
            // 做法： 1：獲取這個元素的高度
            //        2:吧獲取的高度賦值給這個元素，這樣這個元素就是高度固定的了。nextTick用於dom刷新後執行
            _this.$nextTick(function() {
                var height = _this.$refs.box.offsetHeight;
                console.log(height);
                this.$refs.box.style.height = height + "px";
                _this.height = height + "px";
            });
        }
    },
    mounted() {
        _this = this;
        _this.fun_get_list();
    }
};
</script>

<style lang="scss">
.transition_dom {
    transition: all 0.3s linear 0s;
}
.child_right_slider {
    display: inline-block;
    width: 300px;
    background-color: black;
    color: white;
}
</style>