Dinamik kaynakla ng-include üzerinde animasyon bırakma

Question

Dinamik bir URL'ye (içeriği beklendiği gibi çalışıyor) dayalı bir ng-include içeriğim var.

<ng-include class="my-content-area" src="templateUrl"></ng-include> 

sorun

I animasyon enter ve içerik leave çalışıyorum zaman gelir (açısal dokümanlar göre, bu iki olaylar ile canlandırmak için içerir ng-dahil). beklendiği gibi

.my-content-area.ng-enter, 
.my-content-area.ng-leave { 
    transition: all 500ms; 
}  
.my-content-area.ng-enter { 
    opacity:0; 
} 
.my-content-area.ng-enter.ng-enter-active { 
    opacity:1; 
}  
.my-content-area.ng-leave { 
    opacity:1; 
} 
.my-content-area.ng-leave.ng-leave-active { 
    opacity:0; 
} 

enter çalışıyor, ancak leave değil. Denetleyicimde templateUrl değiştiğinde, içeriğin hemen kaybolduğunu (kaybolmadığını) görüyorum.

Herhangi bir fikrin var mı? kullanılarak

Answer 1

Ben dinamik içeriğe sahip this plunker oluşturulur ve iyi çalışıyor.
Kontrol etmeye çalışın.
Sanırım probleminiz kabın ya da elemanların pozisyonu ile ilgili olabilir.
İlk kod from here alındı. Orada angularjs 1.2+ animasyonlar hakkında daha fazla bilgi bulabilirsiniz.

Answer 2

Dene:

.my-content-area.ng-leave { 
    -webkit-transition: all 500ms; /* Safari/Chrome */ 
    transition: all 500ms; 
}