在web端，“展开收起”效果一般用jQuery的slideUp()/slideDown()实现
但在移动端，因为CSS3动画支持良好，所以移动端的JavaScript框架都没有动画模块。此时，使用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>
核心实现原理
- 通过type为checkbox的input多选框的选中状态切换，来改变更多文本的显示和隐藏
- 使用css的伪类选择器:checked来获取多选框的选中状态
- 通过设定足够大的max-height，可以支持动态的更多文本，但不能太大，否则收起动画会有延迟（远大于真实高度的动画部分，用户感觉不到）
更多细节，详见代码中css部分的注释
