纯css动画 —— 展开、收起

原创

朝阳39 2022-07-12 16:02:39 ©著作权

文章标签 css 多选框移动端 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者朝阳39的原创作品，请联系作者获取转载授权，否则将追究法律责任

在web端，“展开收起”效果一般用jQuery的slideUp()/slideDown()实现

但在移动端，因为CSS3动画支持良好，所以移动端的JavaScript框架都没有动画模块。此时，使用CSS实现动画就成了最佳的技术选型。

最终效果

纯css动画 —— 展开、收起_多选框

纯css动画 —— 展开、收起_多选框_02

完整范例代码

<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>