如何使 ng-show/ng-hide 过渡动画更流畅
how to make ng-show/ng-hide transition animation smoother
我们的团队正在 ServiceNow 中进行开发,并创建了一个带有小部件的页面,该小部件在不同的选项卡中嵌入了其他几个小部件。我们正在使用 ng-show/ng-hide 方法来 show/hide 指定的选项卡。我们添加了一些非常基本的过渡 css 来淡入和淡出所选选项卡:
.animate-switch {
transition: all linear 1s;
opacity: 1;
}
.animate-switch.ng-hide {
opacity: 0;
}
这按预期工作 -- 隐藏选项卡淡出并同时单击选项卡淡入,但当淡出完成时,页面中会出现非常明显的抖动以显示活动选项卡。
有什么我们可以添加到我们的 css 中来使这个过渡更顺畅的吗?
我建议在转换中删除 "all" 值,只转换您实际使用的值,例如 opacity
。看着一切可能改变的东西有点贵。
您可能还想通过添加 3d 变换来强制硬件加速(您的 GPU 在这方面做得更好)。
.animate-switch {
transition: opacity linear 1s;
transform: translateZ(0);
opacity: 1;
}
.animate-switch.ng-hide {
opacity: 0;
}
我们的团队正在 ServiceNow 中进行开发,并创建了一个带有小部件的页面,该小部件在不同的选项卡中嵌入了其他几个小部件。我们正在使用 ng-show/ng-hide 方法来 show/hide 指定的选项卡。我们添加了一些非常基本的过渡 css 来淡入和淡出所选选项卡:
.animate-switch {
transition: all linear 1s;
opacity: 1;
}
.animate-switch.ng-hide {
opacity: 0;
}
这按预期工作 -- 隐藏选项卡淡出并同时单击选项卡淡入,但当淡出完成时,页面中会出现非常明显的抖动以显示活动选项卡。
有什么我们可以添加到我们的 css 中来使这个过渡更顺畅的吗?
我建议在转换中删除 "all" 值,只转换您实际使用的值,例如 opacity
。看着一切可能改变的东西有点贵。
您可能还想通过添加 3d 变换来强制硬件加速(您的 GPU 在这方面做得更好)。
.animate-switch {
transition: opacity linear 1s;
transform: translateZ(0);
opacity: 1;
}
.animate-switch.ng-hide {
opacity: 0;
}