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

【问题标题】：how to make ng-show/ng-hide transition animation smoother如何使 ng-show/ng-hide 过渡动画更流畅
【发布时间】：2019-01-16 01:08:30
【问题描述】：

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

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

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

有什么我们可以添加到我们的 css 中以使这个过渡更平滑一点吗？

【问题讨论】：

【解决方案1】：

我建议删除转换中的“全部”值，只转换您实际使用的内容，例如opacity。观察所有可能改变的东西有点贵。

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

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

【讨论】：