Question

使用Angular和angular-animate，两者都是1.5.6

我没有ngAnimate取得成功。据我所知，课程ng-enter和ng-leave未添加到<div class="col-xs-12 view-animation" ng-view></div>。我做错了什么？

的index.html：

  <body ng-app="gulpNewy">
    <div id="sidebar-back-drop"></div>
    <div class="row">
      <div id="sidebar-bar-static">
        <a href="#home" class="button-side btn btn-block btn-inverse">Home</a>
        <a href="#examples" class="button-side btn btn-block btn-inverse">Examples</a>
      </div>
    </div>

    <div class="viewport row">
       <div class="col-xs-12 view-animation" ng-view></div>
    </div>

的CSS：

.ng-enter, .view-animation.ng-enter {
  left: 500px;
}

.ng-leave, .view-animation.ng-leave-active, .view-animation.ng-leave {
  left: -500px;
}

app.js：

var gulpNewy =
  angular
  .module('gulpNewy', ['ngRoute', 'ngAnimate'])
  .config(function($routeProvider) {
      $routeProvider
          .when('/home', {
              templateUrl: 'views/home.html',
              controller: 'homeCtrl'
          })
          .when('/examples', {
              templateUrl: 'views/examples.html'
          })
      $routeProvider.otherwise({ redirectTo: '/home'});
  });

Answer 1

问题是动画发生得很快。一旦我用了

{{ user.createdAt }} // appearing 2016-06-02T14:20:27.062Z but I need: 06/02/2016 14:20:27

我可以看到动画。

Answer 2

您需要从控制器更改类。见https://www.google.com.ar/url?sa=t&source=web&rct=j&url=http://www.nganimate.org/&ved=0ahUKEwi_puevzonNAhXGlR4KHT-yApoQFggbMAE&usg=AFQjCNFuh3t3sGVMwBfRRh50fkenHFUpGw&sig2=9asfdX8gJs0msLmwyezNnA

ngAnimate 1.5.6不向ng-view添加进入和离开类

2 个答案: