纯css动画 —— 展开、收起

<template>
    <div class="box">
        <input id="check" type="checkbox">
        <p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p>
        <div class="element">
            <p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p>
        </div>
        <label for="check" class="check-in">更多↓</label>
        <label for="check" class="check-out">收起↑</label>
    </div>
</template>
<style scoped>
    /*文本分散对齐*/
    p {
        text-align: justify;
    }
 
    /*限定文本的最大宽度*/
    .box {
        max-width: 300px;
        padding: 10px;
    }
 
    /*隐藏多选框*/
    input[type="checkbox"] {
        display: none;
    }
 
    /*更多和收起按钮的样式*/
    .check-in, .check-out {
        color: #34538b;
        cursor: pointer;
    }
 
    /*默认隐藏收起按钮*/
    .check-out {
        display: none;
    }
    /*选中状态时，显示收起按钮*/
    :checked ~ .check-out {
        display: inline-block;
    }
    /*选中状态时，隐藏更多按钮*/
    :checked ~ .check-in {
        display: none;
    }
 
    /*更多文本的最大高度为0，即不显示*/
    .element {
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s;
    }
 
    /*选中状态时，更多文本的最大高度为666，触发transition过渡动画向下展开显示*/
    :checked ~ .element {
        max-height: 666px;
    }
</style>