0

コントローラーを介して ngShow をトリガーしようとしていますが、機能しますが、フェードトランジションを取得するために必要な ngAnimate クラスを使用していません。

ボタンを使用して ngShow を切り替えると正常に機能しますが、プログラムで切り替えると機能しません。これは予想される動作ですか？私はそれを回避できますか？

プランク: http://plnkr.co/edit/swJDP1KBBxcRfK9auYPs?p=preview

  <body ng-controller="MainCtrl">
    <input type="checkbox" ng-model="visible">
    <div ng-show="visible" class="wrap" role="document">
      Hello
    </div>
  </body>

 

var app = angular.module( "app", ['ngAnimate']);

app.run(function($rootScope) {
  $rootScope.visible = false;
});

app.controller('MainCtrl', function($rootScope, $scope) {
  $rootScope.visible = true;
});

 

.wrap.ng-hide-add-active {
  display: block!important;
  transition: 0.5s ease-in-out all;
}

.wrap.ng-hide-remove-active {
  display: block!important;
  transition: 0.5s ease-in-out all;
  transition-delay: 0.5s;
}

.wrap.ng-hide {
  opacity: 0;
}
4

1 に答える 1

0

ブロックを実行していて、コントローラー コードが同じダイジェスト サイクルで実行される可能性が高いため、Angular はvisible変数の変更を認識しません。これは、コントローラ コードをタイムアウトにした場合に機能します。例えば

app.controller('MainCtrl', function($rootScope, $scope, $timeout) {
  $timeout(function() {
    $rootScope.visible = true;
  });
});

http://plnkr.co/edit/5IhGE3ol5kI64OlT1e8v?p=preview

于 2015-06-23T14:15:57.770 に答える