1
私は現在ng-enter、ng-repeatsのng-leaveをアニメーション化していますが、ng-show/hideはどうですか?そのクラスもありますか?Angle 1.4.8でng-show/ng-hideをアニメートできますか?
私は現在ng-enter、ng-repeatsのng-leaveをアニメーション化していますが、ng-show/hideはどうですか?そのクラスもありますか?Angle 1.4.8でng-show/ng-hideをアニメートできますか?
ng-hide
およびng-show
の等価クラスは、.ng-hide-add
および.ng-hide-remove
です。また、.ng-hide-add-active
と.ng-hide-remove-active
を使用してスタイルを設定し、必要に応じてこれらの状態を個別に制御できます。
ngHideとngShowのAngularjsドキュメントによると、それぞれのイベント(追加または削除)でアニメーションを生成するために、アクティブな状態にあるときに同じクラスを使用して両方をアニメーションできます。
次の例では、この機能を使用して単純なfade-in
fade-out
ボタンを実装しています。 angular.module('myApp', ['ngAnimate']);
angular-animate.js
が含まれており、またあなたのメインモジュールの依存関係として
ngAnimate
モジュールを追加することを確認し
観察
angular.module('myApp', ['ngAnimate'])
.controller('myController', function ($scope, $interval) {
$scope.show = true;
$interval(function() { $scope.show = !$scope.show; }, 1000);
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
.my-element.ng-hide{
opacity: 0;
}
.my-element.ng-hide-add,
.my-element.ng-hide-remove {
/*
setup animations
mess up with the properties, etc
*/
transition: all linear 1s;
}
.my-element.ng-hide-add-active,
.my-element.ng-hide-remove-active {
/* set state during transitions */
display: inline-block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.4.3/angular-animate.min.js"></script>
<div ng-controller="myController"><pre>show: {{ show }}</pre>
<button class="my-element" ng-show="show">show</button>
</div>