perf: 优化 popover 显隐过渡效果 #3140
perf: 优化 popover 显隐过渡效果 #3140
Conversation
Walkthrough这些更改涉及对 Changes
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 as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## v4 #3140 +/- ##
=======================================
Coverage 81.20% 81.20%
=======================================
Files 226 226
Lines 18139 18139
Branches 2485 2486 +1
=======================================
Hits 14729 14729
Misses 3392 3392
Partials 18 18 ☔ View full report in Codecov by Sentry. |
![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
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/packages/__VUE/popover/index.scss (2 hunks)
- src/packages/__VUE/popover/index.taro.vue (4 hunks)
Additional comments not posted (8)
src/packages/__VUE/popover/index.scss (2)
110-114: 优化显示/隐藏过渡效果这些更改通过在显示和隐藏时添加缩放和透明度过渡效果来优化 popover 的动画效果。确保这些更改在所有浏览器和设备上都能正常工作。
116-119: 使用 ease 过渡效果这些更改为进入和离开动画添加了 ease 过渡效果，以使动画更平滑。确保这些更改在所有浏览器和设备上都能正常工作。
src/packages/__VUE/popover/index.taro.vue (6)
9-9: 修复缺失的闭合标签修复了
<slot>元素的缺失闭合标签，确保了组件的正确渲染。
17-17: 更新过渡属性值将过渡属性值从 "nut-popover" 更改为 "nut-popover-content"，确保与更新的 CSS 类匹配。
43-43: 添加nextTick导入添加了
nextTick导入，以确保在 DOM 更新后执行某些操作。
45-45: 重命名函数将
useTaroRect重命名为rectTaro，确保在代码中一致使用新的函数名称。
133-133: 重构upperCaseFirst函数重构了
upperCaseFirst函数以提高可读性，确保其保持原有功能。
194-229: 重构异步函数将
getPopoverContentW和getContentWidth函数重构为 async/await 以改进错误处理和可读性，确保其保持原有功能。
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/packages/__VUE/popover/index.taro.vue (4 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/packages/__VUE/popover/index.taro.vue
|
修改之后，组件初次加载时获取到的元素定位有点问题，比如「自定义目标元素」这个 demo |
嗯嗯，debug 了一会儿，发现是因为使用了 |
|
示例文档中的 我想到的办法是既然 |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/packages/__VUE/popover/index.scss (2 hunks)
- src/packages/__VUE/popover/index.taro.vue (6 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/packages/__VUE/popover/index.taro.vue
Additional comments not posted (2)
src/packages/__VUE/popover/index.scss (2)
110-114: 优化过渡效果修改了
.nut-popover-content的&-enter-from和&-leave-to类，增加了transform: scale(var(--transform-scale));和opacity: 0;。这些改变应该是为了使弹出和隐藏的动画更加平滑和迅速。确保这些改变与组件的性能优化目标一致。
116-119: 调整过渡时间函数对
.nut-popover-content的&-enter-active和&-leave-active类进行了修改，设置了transition-timing-function: ease;。这种缓动函数通常用于在视觉上更平滑的过渡效果，有助于改善用户体验。
这个 PR 做了什么? (简要描述所做更改)
<popover />组件第一次渲染，会有很明显的延时，并且显隐过渡动画有顿挫感，此 PR 修复了这个问题。修复前：
NutUI.-.Vue.webm
修复后：
2024-07-13.144829.mp4
这个 PR 是什么类型? (至少选择一个)
这个 PR 涉及以下平台:
这个 PR 是否已自测:
Summary by CodeRabbit
新功能
错误修复
<slot>元素中缺失的闭合标签。transition属性值，以确保弹出内容的动画效果。重构