2

2 つのページ間で遷移をアニメーション化しようとしています。

コントローラーに変数を設定しFirstCtrl、コントロールSecondCtrlを作成しng-ifます。

問題は、最初はアニメーションが正常に機能するが、次からは機能しないことです。私は何が欠けていますか？

ルート:

$routeProvider
    .when('/first', {
        templateUrl: 'views/layout.html',
        controller: 'FirstCtrl'
    })
    .when('/second',{
        templateUrl: 'views/layout.html',
        controller: 'SecondCtrl'
    })

最初のコントローラー:

$scope.foobar = true;

2 番目のコントローラー:

$scope.foobar = false;

index.html

<html ng-app='appname'>
   <head> . . . </head>
   <body>
     <div ng-view></div>
   </body>
</html>

レイアウト.html

<div ng-if="foobar" class="effect" ng-include="'views/foobar.html'">
</div>

<a href="/first">fade in</a> <!-- foobar on controller -->
<a href="/second">fade out</a> <!-- foobar on controller -->

css (サス):

.effect {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;

  &.ng-enter {
    opacity: 0;
  }

  &.ng-enter-active {
    opacity: 1;
  }

  &.ng-leave {
    opacity: 1;
  }

  &.ng-leave-active {
    opacity: 0;
  }

}

.effect.ng-enter, .effect.ng-leave{
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}

重要：

これは、変数をビューから直接操作して、アニメーションが完全に機能することを証明するためのデバッグです。

<div ng-if="foobar" class="effect" ng-include="'views/foobar.html'">
</div>

<button ng-click="foobar=true">fade in</button> <!-- foobar on view -->
<button ng-click="foobar=false">fade out</button> <!-- foobar on view -->
4

1 に答える 1