Açısal geçiş geçişi için CSS Kimliği seçicisi kullanamazsınız

Onay kutum input, myDiv benim ng-show kullanarak değiştirir. Bunun güzel görünmesini isterim. Böylece, angular-animate.js kullanarak bir geçiş efekti kullanıyorum.Açısal geçiş geçişi için CSS Kimliği seçicisi kullanamazsınız

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
<script> 
    var app=angular.module('ang_app', ['ngAnimate']); 
    app.controller('ang_control01_main', function($scope) { 

    }); 
</script> 
<style> 
    div { 
     transition: .5s; 
     height: 100px; 
     background-color:lightblue; 
    } 
    .ng-hide { /* using .ng-show here doesn't work btw */ 
     height: 0; 
    } 
</style> 
<body ng-app="ang_app" ng-controller="ang_control01_main"> 
    <input type="checkbox" ng-model="myCheck"> 
    <div id="myDiv" ng-show="myCheck"></div> 
</body>

(http://jsfiddle.net/gfwrknpr/)

İşleri cezası. Ancak, seçiciyi div'dan #myDiv'a değiştirirseniz, animasyon kaybolur. Niye ya?

kaynak

2016-04-01 Blauhirn

animasyon keman çalışıyor çalışacaktır. –

Kemanın postada iyi çalıştığını söyledi. Ama bunu bir kimlik seçici ile değiştirirseniz işe yaramadığını gördüm. Ayrıca bir sınıf seçicisini denedim ve bu DID'nin de çalıştığı – Austin

'u aldım. ilginç. –

için css değiştirmek

#myDiv{ 
    transition: .5s; 
    height: 100px; 
    background-color:lightblue; 
} 
#myDiv.ng-hide { /* using .ng-show here doesn't work btw */ 
    height: 0; 
}

kaynak

2016-04-01 15:19:17 Austin

Neden çalıştığını gösteren bir açıklama var mı? Bunu merak ediyorum. Cevabınız için +1. –

Sadece açısal animasyonlu docs örneğinden çıktım. Geçiş için belirli bir kimlik belirttiğinizde, bunları ng-hide ile eşleştirmek ve etkiyi gerçekleştirmek için belirli bir kimlikle eşleştirmeniz gerektiğini tahmin ediyorum. – Austin

Açısal geçiş geçişi için CSS Kimliği seçicisi kullanamazsınız

cevap

İlgili konular