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;

第二个控制器：

$scope.foobar = false;

索引.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（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 -->
4

1 回答 1

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

于 2015-04-30T20:37:36.707 回答