Question

我试图在两页之间制作过渡动画。

在控制器FirstCtrl和SecondCtrl上设置变量以进行ng-if控制。

问题是动画在第一次正常工作，但在其中它并不起作用。我错过了什么？

路线：

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

第一个控制器：

$scope.foobar = true;

第二个控制器：

$scope.foobar = false;

的index.html

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

的layout.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（SASS）：

.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 -->

Answer 1

您可以利用ngAnimate模块在显示视图时显示动画。

这是一个Plunker，展示了这一点。我正在使用Animate.css并利用ng-enter类。

div[ng-view].ng-enter {
    -webkit-animation: fadeInRight 1.5s;
    animation: fadeInRight 1.5s;
  }

http://plnkr.co/edit/kUeCBdHLuoSl73rvI9fh?p=preview

在两条不同路线之间使用ng-if和ng-include进行ng-animate

1 个答案: