<!-- 
**** 说明：
****   使用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>