これは私が達成しようとしている遷移を使用して、ng-class
アニメーションの大幅に簡略化されたデモです。ng-classベースのng-animateトランジションが機能しないのはなぜですか?
アイテムが選択されたときに単純なフェードを作成しようとしています。
アイテムを選択すると、ng-class
ディレクティブを使用して、selected
クラスが追加されます。アニメーションフッククラスをng-animate
で追加したdocumentationに続いてトランジションを追加しようとしています。
以下は、これまでのコードです。遷移プロパティと共にopacity
を0
に設定し、.selected-add-active
クラスを追加するとopacity
1に遷移するはずです。しかし動作しません。
angular.module('demo', ['ngAnimate'])
.controller('demoCtrl', function($scope) {
$scope.selected = false;
$scope.selectToggle = function() {
$scope.selected = !$scope.selected;
};
});
.item {
width: 50px;
height: 50px;
background: grey;
}
.item.selected {
background-color: dodgerblue;
}
.item.selected.selected-add {
transition: opacity 3s;
opacity: 0;
}
.item.selected.selected-add.selected-add-active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
<div class="item" ng-class="{selected:selected}"></div>
<br>
<br>
<button ng-click="selectToggle();">
{{selected? 'Unselect' : 'Select'}}
</button>
</div>
なぜ私のコードは動作しませんか?