角度アニメーションのトランジションにCSS IDセレクタを使用できません

Myチェックボックスinputはを使用してmyDivをトグルします。私はこれが好きに見えるようにしたいと思います。したがって、私はangular-animate.jsを使ってトランジションエフェクトを使用しています。角度アニメーションのトランジションにCSS IDセレクタを使用できません

<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/）

作品罰金。

ただし、セレクタをdivから#myDivに変更すると、アニメーションが消えてしまいます。どうして？

出典

2016-04-01 Blauhirn

アニメーションがフィドルで働いている動作します。 –

彼はフィドルがポストでうまくいくと言った。しかし、あなたがidセレクタに変更すると、動作しないことがわかりました。私もクラスセレクタを試して、そのDIDも同様に動作します – Austin

それを得ました。面白い。 –

にあなたのCSSを変更

：

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

、それは

出典

2016-04-01 15:19:17 Austin

なぜそれは働いた説明はありますか？私はこれについて興味がある。あなたの答えは+1。 –

私はちょうど角アニメーションドキュメントの例を外しました。私はあなたが移行のための特定のIDを指定するとき、それらを一致させて効果を実行するためにng-hideのための特定のidとそれをペアにしなければならないと思います – Austin

角度アニメーションのトランジションにCSS IDセレクタを使用できません

答えて

関連する問題