ng-animate和ng-if轉換不在Internet Explorer中播放

我有一個簡單的div，它有一個轉換。它從黃色背景轉換爲紅色背景。ng-animate和ng-if轉換不在Internet Explorer中播放

<div class="foo" ng-class="{'foo-visible': vm.visible}">

過渡播放一次foo的 - 可見類添加到div。

這在Chrome，IE ...等工作正常。

但是，一旦我在它周圍添加一個包裝div，轉換將停止在Internet Explorer中工作（使用IE10進行測試）。

<div class="foo--wrapper" ng-if="vm.visible"> 
    <div class="foo" ng-class="{'foo--visible': vm.visible}"> 
</div>

我需要在這種情況下包括ngAnimate。然後它在Chrome中運行，但是在IE中我立即得到了紅色的div，轉換從未播放過。沒有transitionstart（僅限IE）或transitionend事件被觸發。

這裏有一個plunker說明問題：

http://plnkr.co/vpJzudnLxTwoJGZoZaNd

沒有任何人有一個想法是什麼原因造成的？

來源

2015-09-22 Christophe Geers

這個plnkr增加了兩個類似的盒子給你。 http://plnkr.co/edit/lkyWHu?p=preview

<div ng-if="vm.visible"> 
    <div class="animate-box animate-if"> 
    <h2>Inner Class</h2> 
    </div> 
</div> 
<div class="animate-box animate-if" ng-if="vm.visible"> 
    <div> 
    <h2>Outer Class</h2> 
    </div> 
</div>

「外」的作品在IE和Chrome。

Chrome以有意義的方式迭代「Inner」的子動畫。就你的例子而言，Internet Explorer不會。

在結束時，子動畫也不做，因爲刪除父項的延遲時間爲零。

有趣的一點，雖然，IE和Chrome似乎工作的權威的答案同樣在https://docs.angularjs.org/api/ngAnimate/directive/ngAnimateChildren

我使用的CSS是：

.animate-box { 
    height: 100px; 
    width: 100px; 
    background-color: red; 
} 

.animate-if.ng-animate { 
    transition: all 3s linear; 
} 

.animate-if.ng-enter, 
.animate-if.ng-leave.ng-leave-active { 
    background-color: yellow; 
    opacity: 0; 
} 

.animate-if.ng-leave, 
.animate-if.ng-enter.ng-enter-active { 
    background-color: red; 
    opacity: 1; 
}

來源

2016-05-10 12:59:07

我找到了一個更好的答案，這在http： //www.bennadel.com/blog/2909-child-animations-have-to-take-the-magical-transition-delay-into-account-in-angularjs.htm –

ng-animate和ng-if轉換不在Internet Explorer中播放

回答

相關問題