nutui perf: 优化 popover 显隐过渡效果

这个 PR 做了什么? (简要描述所做更改)

<popover /> 组件第一次渲染，会有很明显的延时，并且显隐过渡动画有顿挫感，此 PR 修复了这个问题。

修复前：

NutUI - 移动端 Vue 小程序组件库.webm

修复后：

https://github.com/user-attachments/assets/05672cb4-1095-4afb-8d78-08446ffade83

这个 PR 是什么类型? (至少选择一个)

[ ] feat: 新特性提交
[ ] fix: bug 修复
[ ] docs: 文档改进
[x] style: 组件样式/交互改进
[ ] type: 类型定义更新
[ ] perf: 性能、包体积优化
[ ] refactor: 代码重构、代码风格优化
[ ] test: 测试用例
[ ] chore(deps): 依赖升级
[ ] chore(demo): 演示代码改进
[ ] chore(locale): 国际化改进
[ ] chore: 其他改动（是关于什么的改动？）

这个 PR 涉及以下平台:

[x] NutUI H5 @nutui/nutui
[x] NutUI Taro @nutui/nutui-taro

这个 PR 是否已自测:

[ ] 自测 Vite 脚手架使用测试仓库
[x] 自测 Taro 脚手架使用小程序 & Taro-H5 测试仓库

Summary by CodeRabbit

新功能
- 更新了弹出框的过渡动画效果，使得弹出和消失的动画更加平滑自然。
错误修复
- 修正了 <slot> 元素中缺失的闭合标签。
- 修改了 transition 属性值，以确保弹出内容的动画效果。
重构
- 优化了函数命名，以提高代码可读性。
- 使用 async/await 改写了部分函数，增强了错误处理和代码简洁性。

Jul 13 '24 06:07 daiwanxing

Walkthrough

这些更改涉及对 src/packages/__VUE/popover 目录下的 index.scss 和 index.taro.vue 文件的修改。主要包括对弹出框动画的 CSS 调整，以及在 Vue 组件中修复标签、修改过渡属性、重命名函数和优化代码以提高可读性和错误处理。

Changes

文件路径	更改摘要
src/packages/__VUE/popover/index.scss	调整了弹出框动画的 CSS 类，修改了进入和离开弹出框的过渡和样式，包括缩放、不透明度和过渡计时函数的变化。
src/packages/__VUE/popover/index.taro.vue	修复了 `<slot>` 元素中的缺少闭合标签问题，将 `transition` 属性值从 "nut-popover" 修改为 "nut-popover-content"，并添加了 `nextTick` 函数的导入。重命名了函数 `useTaroRect` 和 `useTaroRectById`，优化了 `upperCaseFirst` 函数的可读性，转换 `getPopoverContentW` 和 `getContentWidth` 函数为 async/await 形式以改进错误处理和可读性。

Poem

在代码的世界里，我们欢呼雀跃，
弹出框的动画，闪耀如星辉；
CSS 优雅转变，Vue 组件重整，
函数优化，错误不再相随。
在夏日的代码森林中，小兔子吟唱着，
技术的美丽，如梦如诗。
(\(\ 
( -.-) o_(")(")

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?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

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)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

Jul 13 '24 06:07 coderabbitai[bot]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 81.20%. Comparing base (a415d0b) to head (d975eb9).

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.