我们的团队正在ServiceNow中开发,并创建了一个页面,其中有一个小部件将其他几个小部件嵌入到不同的选项卡中。我们使用ng show/ng hide方法来显示/隐藏指定的选项卡。我们添加了一些非常基本的转换CSS来淡入淡出所选选项卡:
.animate-switch { transition: all linear 1s; opacity: 1; } .animate-switch.ng-hide { opacity: 0; }
这和预期的一样——隐藏选项卡会淡出,单击选项卡会同时淡入,但是当淡出完成时,页面中会有一个非常明显的震动来显示活动选项卡。
有没有什么可以添加到我们的CSS中,使这个转换更加平滑?
我建议删除转换中的“全部”值,只转换您实际使用的内容,例如 opacity . 观察一切可能发生的变化是有点昂贵的。
opacity
您可能还想通过添加3D转换来强制硬件加速(您的GPU在这方面做得更好)。
.animate-switch { transition: opacity linear 1s; transform: translateZ(0); opacity: 1; } .animate-switch.ng-hide { opacity: 0; }