perf: adjust popup animation time fn #106
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
主要改动:优化popup的transition动画
展开动画改动:
popup的动画实际上由透明度和高度动画组成,此前透明度入场动画曲线使用的是
cubic-bezier(.38, 0, .24, 1)
效果可见 https://tdesign.tencent.com/design/motion
将这个动画延长到2s 可以看到效果透明度变化在前段较缓后段加速的情况
以
select
为例以
tooltips
为例由于曲线前段缓慢的透明度变化,导致了一定程度的视觉卡顿;
调整展开时间曲线为
linear
效果,线性时间曲线 同样延长至2s观察效果;以
select
为例以
tooltips
为例调整后正常速度效果
以
select
为例以
tooltips
为例收起动画改动:
收起动画此前存在的问题是收起阴影效果拖拉 时间曲线为
cubic-bezier(0.38, 0, 0.24, 1)
将这个动画延长到2s 可以明显看到后半段box-shadow仍然较重
以
select
为例调整时间曲线为
cubic-bezier(0,0,.32,1)
同样将动画延长到2s看效果以
select
为例调整后正常速度效果
以
select
为例其他
typo error fix.
placment
->placement