代码之家 › 专栏 › 技术社区 › Dave

如何使ng show/ng hide transition动画更平滑

servicenow css-transitions angularjs css

Dave · 技术社区 · 5 年前

我们的团队正在ServiceNow中开发,并创建了一个页面,其中有一个小部件将其他几个小部件嵌入到不同的选项卡中。我们使用ng show/ng hide方法来显示/隐藏指定的选项卡。我们添加了一些非常基本的转换CSS来淡入淡出所选选项卡:

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

这和预期的一样——隐藏选项卡会淡出,单击选项卡会同时淡入,但是当淡出完成时,页面中会有一个非常明显的震动来显示活动选项卡。

有没有什么可以添加到我们的CSS中,使这个转换更加平滑?

1 回复 | 直到 5 年前

Bryce Howitson 5 年前

我建议删除转换中的“全部”值,只转换您实际使用的内容,例如 opacity . 观察一切可能发生的变化是有点昂贵的。

您可能还想通过添加3D转换来强制硬件加速(您的GPU在这方面做得更好)。

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前