IE11 Sass Calc für Animation Timing funktioniert nicht

Question

Ich benutze Sass und versuche, einige Animationen in IE11 arbeiten (sie funktionieren perfekt in Chrome). Ich habe eine Reihe von Timing-Variablen herunterkaskadieren und jede entweder über Calc-Funktion verwalten.

Beispiel Sass mit variabler defs

$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 dies als unten übersetzt und ist in rot anzeigt ungültig css

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

Während Chrome liest die gleiche Linie aber aus irgendeinem Grund doesn hervorgehoben‘ t beschweren und benimmt sich wie gewünscht

Wenn ich die Calcs für die Animation lösche, funktioniert Timing auch in IE11 gut. Wie kann ich berechnen, um mit Sass-Variablen in IE11 für Animationszeiten zu arbeiten?

Update

Nach einem bisschen stochern Sekunden in der Berechnung zu verwenden, ich denke, dies zu versuchen, zurückzuführen ist. Ich bin mir nicht sicher, warum es in Chrome und nicht in IE11 funktionieren würde. Nach mehr Stossen scheint die gesamte Interpolation auf Punkt und Sekunden sind als Sekunden markiert, aber immer noch führt der Calc nicht gerade eine Berechnung durch.

update2

Nach mehr es Hantieren scheint IE nur Probleme hat Einheiten Zeit Berechnung Es weigert calcs mit der Zeit zu ermöglichen. calc(0.1s + 0.1s) verursacht Fehler, während nur die Verwendung 0.2s funktioniert gut

Irgendwelche Vorschläge, wie ich Calc verwenden kann, um meine Animationszeiten zu verwalten und immer noch IE zu verhalten?

Answer 1

Sie nicht ber brauchen - einfach zusätzlich ohne

Interpolation verwenden

$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