fix: taro版 折叠面板增加一下动画控制，简化height计算 #3101
Conversation
Walkthrough这些更改主要涉及为 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CollapseItem
participant CSS
User->>CollapseItem: Click to toggle
CollapseItem-->>CSS: Apply/Remove .transition class
CollapseItem-->>CollapseItem: Check transition property
alt Transition is true
CollapseItem->>CSS: Apply height transition
else Transition is false
CollapseItem->>CSS: Apply instant height change
end
CollapseItem->>User: Toggle completed
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
src/packages/__VUE/collapseitem/collapse-item.vue (1)
26-26: 动画控制属性transition的添加是合理的，可以使折叠面板的展开和收起更加平滑。但是，请确保在文档中添加关于这个新属性的描述，以便开发者了解如何使用它。Also applies to: 34-34
src/packages/__VUE/collapseitem/collapse-item.taro.vue (1)
29-29: 与 Vue 版本类似，Taro 版本也添加了transition属性来控制动画效果。这将有助于提高用户界面的流畅性和响应性。请确保在文档中添加相关说明，以便开发者了解如何在 Taro 项目中使用这一功能。Also applies to: 37-37
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/packages/__VUE/collapseitem/collapse-item.taro.vue (5 hunks)
- src/packages/__VUE/collapseitem/collapse-item.vue (3 hunks)
- src/packages/__VUE/collapseitem/index.scss (1 hunks)
Files skipped from review due to trivial changes (1)
- src/packages/__VUE/collapseitem/index.scss
Additional comments not posted (2)
src/packages/__VUE/collapseitem/collapse-item.vue (1)
66-66:transition属性已被成功添加到CollapseItemProps接口和props对象中，默认值为true。这是一个明智的选择，因为它允许开发者轻松启用或禁用过渡效果。不过，建议在组件的文档中详细说明这一点。Also applies to: 78-78
src/packages/__VUE/collapseitem/collapse-item.taro.vue (1)
69-69: 在 Taro 版本中，transition属性的添加和默认值设置都是恰当的。这有助于统一不同平台间的组件行为。建议在 API 文档中提供关于如何通过 props 自定义此行为的详细信息。Also applies to: 81-81
|
增加 transition 属性，默认为 true，开发者自行控制是否有展开/收起动画。这个功能是可以添加的。 |
要的就是去掉这个动画，增加了一个配置，通过样式去设置，你没发现实际使用的时候这个动画会频繁重绘以及页面卡顿吗？ |
可以看下原先源代码里如何实现的这个动画。。他是不停的设置这个height....感谢提供框架，但是这个做法真的不好，可以参考重绘和重排 |
并不存在「不停地设置 height」，在单次展开或者收起的操作过程中，都只会对 height 属性进行「两次修改」，目的是为了实现在高度上的平滑动画。 而且 PR 中的修改的结果是「一定没有动画」，而不是「用属性控制了是否启用动画」 |
|
|
1、审查元素时 height 当然会变化，因为本身实现的效果就是关于 height 的动画。而且对高度做两次修改也是很常见的做法。 |
问题就是出在这里啊，原先的动画效果是不停地改变heigt的值 transition: height 0.3s ease-in-out; 这个效果就是我说的频繁更新height的地方，动画要避免操作这类导致重排的属性，我只是需要满足能控制是否有动画就行了 |
这个 PR 做了什么? (简要描述所做更改)
taro版 折叠面板增加一下动画控制，简化height计算
这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台:
这个 PR 是否已自测:
Summary by CodeRabbit
transition属性，以控制折叠时的过渡效果。.transitionCSS 类，以处理高度过渡效果。