ngAnimate sürüm 1.3.10 çalışmıyor

Question

Aşağıdaki yönergeleri kullanıyorum: ngAnimate Angularjs Ancak bir şey hala çalışmıyor. Herhangi bir etki görmüyorum. İşte

kodum: Aşağıdaki komut dosyası içeren gelmiş sayfasında

(her iki angularjs ait 1.3.10 sürümü için geçerlidir):

<script type="text/javascript" src="/Scripts/angular.min.js"></script> 
<script type="text/javascript" src="/Scripts/angular-animate.min.js"></script> 
<script type="text/javascript" src="/Scripts/Angular/app.js"></script> 

Benim app.js şudur:

(function (angular) { 
    var public_area = 
     angular.module("public-area", ['ngResource', 'ngAnimate']) 
     ... 

sayfa I yönü kullanım animasyon kodudur:

<p ng-show="my_condition" class="scale-animation">...</p> 

Ve nihayet, css

.scale-animation.enter, 
.scale-animation.leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position:relative; display:block; 
} 

.scale-animation-enter, 
.scale-animation-leave.scale-animation-leave-active { 
    -webkit-transform:scaleY(0); 
    -moz-transform:scaleY(0); 
    -ms-transform:scaleY(0); 
    -o-transform: scaleY(0); 
    transform:scaleY(0); height:0; opacity:0; 
} 

.scale-animation-leave, 
.scale-animation-enter.scale-animation-enter-active { 
    -webkit-transform:scaleY(1); 
    -moz-transform:scaleY(1); 
    -ms-transform:scaleY(1); 
    -o-transform: scaleY(1); 
    transform:scaleY(1); height:30px; opacity:1; 
} 

paragraf, görünür ve doğru kaybolur, ancak hiçbir animasyon Ne bana garip ben de css tanımlanan sınıfları görmek aspected olmasıdır ... gösterilmektedir Koşul doğrulandığında ya da değilken DOM (krom geliştirici aracılığıyla). ancak sınıflar kullanılmaz ...

Sorun nedir? Basit bir PLUNKER ardından

:

https://plnkr.co/edit/atK7z5rWzDSEccB2HG0s?p=preview

teşekkür ederiz

Sen transition css enter/leave sürümleri

ngAnimate eğer bilir nasıl budur değil orijinal eleman sınıfına ayarlanmış olması gerekir

Answer 1

ben vardır

/* SCALE */ 
.scale-animation.ng-enter, 
.scale-animation.ng-leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
    position:relative; display:block; 
} 

.scale-animation.ng-enter, 
.scale-animation.ng-leave.ng-leave-active { 
    -webkit-transform:scaleY(0); 
    -moz-transform:scaleY(0); 
    -ms-transform:scaleY(0); 
    -o-transform: scaleY(0); 
    transform:scaleY(0); 

    opacity:0; 
} 

.scale-animation.ng-leave, 
.scale-animation.ng-enter.ng-enter-active { 
    -webkit-transform:scaleY(1); 
    -moz-transform:scaleY(1); 
    -ms-transform:scaleY(1); 
    -o-transform: scaleY(1); 
    transform:scaleY(1); 

    opacity:1; 
} 

kullanmak ... Doğru sınıfları yanlış css sınıfları kullanıyordum Ve yerini

ng-show 

with

ng-if 

Answer 2

DOM oluşturulurken öğe animasyonlarını yönetmesi gerekiyor.

Kural ekle

.scale-animation{ 
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all; 
} 

Ve geçişi kaldırın:

.scale-animation.enter, 
.scale-animation.leave{ 
    /* remove transition */ 
}