css transition在弹窗显示隐藏效果中的应用

等等，我昨天在调试弹出代码时遇到了一些奇怪的事情。
我当然添加了一个过渡，但它第一次出现时就卡住了。
后来发现背景颜色的alpha值从0变成0.5 的时候太突兀了。

不透明度过渡时间从 0 到 1 变为 0.6 秒，加上 0.3 秒的变换，总时间为 0.9 秒。
给人一种用户可以清晰感受到“出现”的过程的感觉。
然而，在使用可见性时，人眼无法跟上“立即可见”的切换，因此可见性与不透明度配合使用效果最佳。

等等，还有别的事。
我尝试将模态内容比例从 0.8 更改为 1 ，并注意到当背景为渐变颜色时，中间存在颜色间隙。
然后我添加背景颜色：白色；解决办法已经解决了。
这个细节太让人心疼了。

突然我想到：如果弹窗背景不是半透明而是有模糊效果怎么办？您可以使用背景滤镜：Blur(5 px);尝试一下，看看是否会影响过渡性能。

今天下午 3 点我特意使用 Chrome 的性能选项卡进行测试。
对于纯opacity和transform的弹出窗口，重绘率低于5 %，但添加box-shadow后，重绘率提高到2 8 %。
看来影子是性能杀手。

说到这里，为什么display:none比visibility:hiden慢那么多？因为显示会重建 DOM 层次结构，而可见性只会改变 CSS 状态。
但这东西需要测试，而不是仅仅猜测。

CSS3中transition、transform分不清楚？

说白了，transition和transform是CSS中两个特别有用的工具，但是它们的用途却完全不同。
过渡负责平滑元素风格的变化，例如为动画添加缓动装置；转换直接利用元素的位置和形状，而不改变其在 DOM 中的布局。

我们先来说说最重要的区别：在我们去年运行的项目中，用户反映当鼠标悬停在按钮上时背景颜色突然变暗。
直接使用变换无法解决这个问题。
应添加过渡属性以使其平滑。
还有一点是该变换特别适合处理3 D效果。
比如我们使用rotateX绕X轴旋转logo，性能依然稳定在3 000的水平。
还有另一个关键细节。
转型不会引发重新安排和重新分配，但过渡会引发。
创建复杂动画时应注意这一点。
说实话，这很令人困惑。
起初我以为它们可以互相替代，但后来我发现这是完全错误的。

等一下，还有一件事。
虽然transform3 d效率很高，但低版本浏览器兼容性较差。
使用之前最好先检查一下CanIUse。
建议新手先练习一下变身，熟练后再玩各种有趣的变身操作。