使用过CSS transition属性的童鞋们应该都清楚，当元素在过渡开始或者结束时的高度为auto时，动画是不生效的；那么如何才能实现元素高度的改变动画效果呢？ 本篇文章将为大家提供一个基于Vue3的非常简洁的解决方案。
要实现高度的改变动画，我们需要在动画进行之前为元素设置准确的高度。
当元素由可见变为隐藏状态时，我们需要先获取元素的计算高度，将其设置到style属性上，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为0，这样高度的改变动画就会正常进行。
当元素由隐藏变为可见状态时，我们需要先将高度设置为auto，然后获取元素的计算高度，再将高度设置为0，然后执行一个触发浏览器渲染引擎重绘的动作，然后再将高度设置为计算高度，这样高度的改变动画就会正常进行。
现在，根据以上实现原理分析，我们创建一个高度的改变动画通用组件CollapseTransition.vue。该组件非常简单，仅需30多行代码。我几乎每行代码都有注释，大家应该能看懂吧？
以上就是实现高度的改变动画的通用组件源码，童鞋们理解了吗？是不是非常简单？现在，我们实现折叠面板组件。使用过element-ui这样的UI库的童鞋们应该都知道，折叠面板是由两个组件折叠面板Collapse和折叠面板项CollapseItem组合而成；
现在，我们先实现CollapseItem.vue组件。为了节省篇幅，我将源码中的空行全部去掉了，缩进比较规范，自认为可读性还行；源码如下，一共30多行，我直接在源码中添加了注释，就不过多解释了。
这是CollapseItem.vue组件的样式。
现在，我们实现Collapse.vue组件。该组件仍然只有30多行，大家理解起来应该很轻松，我就直接在源码里添加注释作为讲解了；
以上就是折叠面板组件的实现。包括折叠动画组件，一共仅需不到150行代码，是不是非常简单？童鞋们都理解了吗？不管有什么疑问，童鞋们都可以问我。感谢阅读！
1、折叠面板动态生成，通过positionID的唯一标识将不同的折叠数据进行输出，name值为positionID，方便控制折叠面板的展开和折叠；2、折叠面板内容的动态生成【全选按钮，CheckBox组】，相互不冲突。通过positionID：XXX这种数据格式存放数据，XXX为CheckBox的数据；
3、控制其中一个折叠面板有数据选中时，其他面板进行折叠不可用；无选中数据时，所有面板展开可用；这里点击单个CheckBox的时候或者全选按钮的时候动态开始匹配，获取当前操作面板的positionID，如果有选中数据就将其他的折叠设为不可用，若无选中则将所有面板设为展示可用；
4、全选按钮，设置三个状态，全选、取消全选、未选中，不同状态对应不同的图标，点击操作时开始进行图标以及相应功能的切换，点击单个checkbox时，获取当前选中的组进行匹配，更新全选按钮的状态。
1、CheckBox的key值设置为key-positionID，保证每次click或者change都能找到当前操作的面板，保证唯一性，保存时再通过split('-')进行处理；
2、通过positionID的唯一性，标识不同面板关联的数据；
你好,Spry框架中有2种折叠式面板Collapsible和Accordion.根据你的描述你用的应该是Collapsible可折叠式面板.
要实现你说的功能需要为每个CollapsiblePanelTab增加一个点击事件,
例如<div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)">标签</div>
事件响应函数如下
function CloseAllExcept(e){
if (e!==CollapsiblePanel1) CollapsiblePanel1.close()
if (e!==CollapsiblePanel2) CollapsiblePanel2.close()
if (e!==CollapsiblePanel3) CollapsiblePanel3.close()
}
但是这并不是推荐的方法, 这里我推荐你使用另一种Spry组件: Accordion折叠式面板组. 即可实现你要求的功能.插入Accordion面板的方法和插入Collapsible面板相同.
如果调试有问题,可发站内消息给我. Spry技术交流请加我百度Hi好友.
____________________________
附第一种方法的代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)">标签</div>
<div class="CollapsiblePanelContent">内容</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)">标签</div>
<div class="CollapsiblePanelContent">内容</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)">标签</div>
<div class="CollapsiblePanelContent">内容</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1")
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2")
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3")
function CloseAllExcept(e){
if (e!==CollapsiblePanel1) CollapsiblePanel1.close()
if (e!==CollapsiblePanel2) CollapsiblePanel2.close()
if (e!==CollapsiblePanel3) CollapsiblePanel3.close()
}
</script>
</body>
</html>
