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

Question

我正在使用Sass，并试图让一些动画在IE11中工作(它们在Chrome中工作得很好)。我有一组时序变量，通过calc函数级联并管理每个变量。

具有可变防御功能的示例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读取的是同一行，但出于某种原因，它不会抱怨，也不会按照自己的意愿行事

如果我删除动画的calcs，那么在IE11中计时也是很好的。如何让calc使用IE11中的Sass变量来处理动画时间？

更新

经过一番周旋之后，我认为这是由于试图在计算中使用秒。不知道为什么它会在Chrome而不是IE11上工作，虽然它会喜欢任何人的洞察力。经过更多的戳后，所有的插值看起来都在点上，秒被标记为秒很好，但是calc实际上并不是在进行计算。

update2

经过更多的修改后，IE似乎完全无法计算时间单位，它拒绝使用时间来计算时间。calc(0.1s + 0.1s)会导致错误，而只使用0.2s会很好

对于我如何使用calc来帮助管理我的动画时间，以及如何让IE继续运行，有什么建议吗？

Answer 1

您不需要calc -只需使用加法而不需要插值。

$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