Question

我正在使用Sass并尝试在IE11中使用一些动画（它们在Chrome中完美运行）。我有一组时序变量级联并通过calc函数管理每一个。

变量defs的示例sass

$load-modal: 0.2s;
$post-load-modal-delay: calc(#{$load-modal} + 0.1s);
$display-columns: 0.2s;

$display-summary: 0.2s;
$post-display-summary-delay: calc(#{$post-load-modal-delay} + #{$display-columns} + 0.1s);

@include animate(fadeIn $display-summary $post-display-summary-delay forwards);

IE11将其翻译为如下所示，并以红色突出显示，表示无效的CSS

animation: fadeIn 0.2s calc(calc(0.2s + 0.1s) + 0.2s + 0.2s + 0.1s) forwards

虽然Chrome读取同一行但由于某种原因不会抱怨和行为符合要求

如果我删除了动画定时的计算，那么在IE11中也可以正常工作。如何让IE在IE11中使用Sass变量进行动画计时？

更新

经过一番探索后，我认为这是因为在计算中尝试使用秒数。不知道为什么它可以在Chrome中工作而不是IE11，尽管它会喜欢任何人的洞察力。在更多戳之后，所有插值似乎都在点上，秒被标记为秒就好了，但是实际上还没有计算出来。

UPDATE2

经过更多的摆弄后，IE似乎完全无法计算时间单位它拒绝允许时间计算。 calc(0.1s + 0.1s)会导致错误，而只使用0.2s可以正常工作

有关如何使用calc来帮助管理我的动画时序并仍让IE运行的任何建议？

Answer 1

您不需要计算 - 只需使用无插值的加法

$load-modal: 0.2s;
$post-load-modal-delay: $load-modal + 0.1s;
$display-columns: 0.2s;
$display-summary: 0.2s;
$post-display-summary-delay: $post-load-modal-delay + $display-columns + 0.1s;


// $post-display-summary-delay is 0.6s

IE11 Sass Calc的动画计时不起作用

1 个答案: