标签：动画 contHeight 查看 折叠 50px height more border 255

<template>
    <div class="catalogue">
        <div class="box" ref="box" :style="boxHeight">
            <div class="cont" ref="cont">
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </div>
        </div>
        <div class="btn" @click="more = !more" :class="more ? 'active' : ''">
            {{ more ? '隐藏' : '查看更多' }}<i class="el-icon-arrow-down"></i>
            <div class="shadow"></div>
        </div>
    </div>
</template>

<script>
/**  @description:目录管理  **/
export default {
    name: 'catalogue',
    components: {},
    data: () => ({
        more: false,
        contHeight: 0,
    }),
    computed: {
        boxHeight() {
            return {
                height: this.more ? this.contHeight + 'px' : '200px',
            };
        },
    },
    mounted() {
        this.contHeight = this.$refs.cont.offsetHeight;
    },
};
</script>
<style lang="less" scoped>
.box {
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    transition: all 0.2s ease;
    .cont {
        li {
            height: 50px;
        }
    }
}
.btn {
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #000;
    border-top: 0;
    position: relative;
    i.el-icon-arrow-down {
        transition: all 0.2s ease;
        margin-left: @space2;
    }
    .shadow {
        height: 90px;
        width: 100%;
        position: absolute;
        top: -91px;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    }
    &.active {
        .shadow {
            display: none;
        }
        i.el-icon-arrow-down {
            transform: rotate(180deg);
        }
    }
}
</style>

效果图：

标签：动画,contHeight,查看,折叠,50px,height,more,border,255
来源： https://www.cnblogs.com/zhangjianhua26/p/15560305.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。