如何使 ng-show/ng-hide 过渡动画更流畅

Question

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

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

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

有什么我们可以添加到我们的 css 中来使这个过渡更顺畅的吗？

Answer 1

我建议在转换中删除 "all" 值，只转换您实际使用的值，例如 opacity。看着一切可能改变的东西有点贵。

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

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

how to make ng-show/ng-hide transition animation smoother