过渡在页面加载时无法正确显示

Question

我有一个仪表，需要根据发送到html文件的变量进行填充。 为此，我将初始值设置为零，如下所示：

  transform:rotate(.0turn);
  transition: all 1.3s ease-in-out;

每次加载html时（第一次或使用f5加载），它都会生成一个我想避免的怪异动画，即使当我更改要使用的部分时（从侧面看-导航）并变回原来的位置，动画是平滑的，并且可以显示。

[ngStyle]="{ 'transform': 'rotate(' + dashService.valor_radio + 'turn)' }">

这是我将值从html页发送到CSS文件的部分。 我在Google上遇到的每个问题似乎都是相反的，如何避免页面加载时出现过渡。 注意：我不能使用JQuery

Answer 1

您可能会在动画中看到初始断断续续的情况，因为在初始加载期间会发生很多动作，尤其是在延迟加载的模块中时。

根据您要实现的目标，您可以在动画中短暂延迟地解决此问题：

transition: all 1.3s 100ms ease-in-out;
                      ^ delay

嗯，好吧，根据您的评论，听起来好像在构建DOM时也在对容器的宽度和/或高度进行动画处理。尝试将transition: all更改为更具体的属性，例如transition: transform

Answer 2

解决方案： 显然，在转换后使用“ all”会使我的所有参数转换，而不仅仅是“ transform：rotate”。 就像将“转换：全部”替换为“转换：转换”一样简单