如何使ng-show / ng-hide过渡动画更平滑

Question

我们的团队正在ServiceNow中进行开发，并创建了一个带有小部件的页面，该页面将其他几个小部件嵌入到不同的选项卡中。我们正在使用ng-show / ng-hide方法显示/隐藏指定的标签。我们添加了一些非常基本的过渡CSS，以淡入和淡出所选标签：

.animate-switch {
  transition: all linear 1s;
  opacity: 1;
}
.animate-switch.ng-hide {
  opacity: 0;
}

这可以按预期方式工作-隐藏选项卡逐渐淡出，并且单击时选项卡同时淡入，但是当淡出完成时，页面中会出现非常明显的颠簸以显示活动的选项卡。

有什么可以添加到CSS中的功能，以使此过渡更加平滑吗？

Answer 1

我建议删除过渡中的“所有”值，然后过渡您实际使用的内容，例如opacity。观看可能会发生变化的一切都有些昂贵。

您可能还想通过添加3d变换来强制硬件加速（您的GPU更好）。

.animate-switch {
  transition: opacity linear 1s;
  transform: translateZ(0);
  opacity: 1;
}
.animate-switch.ng-hide {
  opacity: 0;
}