角度javascript动画不工作

我有一个角度JavaScript动画不工作的问题。。。在我调用的指令中：

$animate.addClass(element, 'test');

但由于某些原因，动画没有记录到它已添加到addClass处理程序中。他们的框架中似乎出现了一些问题，因为ng animate类没有被添加到相关DOM元素中的指令中，我认为这可能与此有关。起初我认为这可能是一个计时问题，所以我添加了一个有点难看的暂停作为腰带和背带，但它仍然不起作用

请参见此处的最小测试用例：

---

任何提示都将不胜感激。

我不确定您是否想这样做，但如果您希望为AngularJS应用程序设置更改视图的动画，您可以使用ngRoute中使用的示例：

您可以在ngRoute的源代码中看到示例和说明中的所有代码

Index.html

<example module="ngViewExample" deps="angular-route.js" animations="true">
  <file name="index.html">
    <div ng-controller="MainCntl as main">
      Choose:
      <a href="Book/Moby">Moby</a> |
      <a href="Book/Moby/ch/1">Moby: Ch1</a> |
      <a href="Book/Gatsby">Gatsby</a> |
      <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
      <a href="Book/Scarlet">Scarlet Letter</a><br/>

      <div class="view-animate-container">
        <div ng-view class="view-animate"></div>
      </div>
      <hr />

      <pre>$location.path() = {{main.$location.path()}}</pre>
      <pre>$route.current.templateUrl = {{main.$route.current.templateUrl}}</pre>
      <pre>$route.current.params = {{main.$route.current.params}}</pre>
      <pre>$route.current.scope.name = {{main.$route.current.scope.name}}</pre>
      <pre>$routeParams = {{main.$routeParams}}</pre>
    </div>
  </file>

选择：
|
|
|
|



<file name="animations.css">
    .view-animate-container {
      position:relative;
      height:100px!important;
      position:relative;
      background:white;
      border:1px solid black;
      height:40px;
      overflow:hidden;
    }

    .view-animate {
      padding:10px;
    }

    .view-animate.ng-enter, .view-animate.ng-leave {
      -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;

      display:block;
      width:100%;
      border-left:1px solid black;

      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      padding:10px;
    }

    .view-animate.ng-enter {
      left:100%;
    }
    .view-animate.ng-enter.ng-enter-active {
      left:0;
    }
    .view-animate.ng-leave.ng-leave-active {
      left:-100%;
    }
  </file>

$location.path（）={{main.$location.path（）}
$route.current.templateUrl={{main.$route.current.templateUrl}}
$route.current.params={{main.$route.current.params}
$route.current.scope.name={{main.$route.current.scope.name}
$routeParams={{main.$routeParams}}

Animation.css

.查看容器动画{
位置：相对位置；
高度：100px！重要；
位置：相对位置；
背景：白色；
边框：1px纯黑；
高度：40px；
溢出：隐藏；
}
.查看动画{
填充：10px；
}
.view-animate.ng-enter、.view-animate.ng-leave{
-webkit过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）1.5s；
过渡：全立方贝塞尔（0.250,0.460,0.450,0.940）1.5s；
显示：块；
宽度：100%；
左边框：1px纯黑；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
填充：10px；
}
.view-animate.ng-enter{
左：100%；
}
.view-animate.ng-enter.ng-enter-active{
左：0；
}
.view-animate.ng-left.ng-left-active{
左-100%；
}

Script.js

angular.module（'ngViewExample'，['ngRoute'，'ngAnimate']，
函数（$routeProvider，$locationProvider）{
$routeProvider.when（'/Book/：bookId'{
templateUrl:'book.html'，
控制员:BookCntl,，
controllerAs:“书”
});
$routeProvider.when（'/Book/：bookId/ch/：chapterId'{
templateUrl:'chapter.html'，
控制员：第二章，
controllerAs:“章节”
});
//配置html5使链接在JSFIDLE上工作
$locationProvider.html5Mode（true）；
});
函数mainctl（$route、$routeParams、$location）{
这.$route=$route；
此.$location=$location；
这.$routeParams=$routeParams；
}
功能书目录（$routeParams）{
this.name=“BookCntl”；
this.params=$routeParams；
}
功能章节CNTL（$routeParams）{
this.name=“ChapterCntl”；
this.params=$routeParams；
}

此代码此代码将允许您完全设置视图转换的动画

---

stackoverflow的更多资源：

对不起，也许我应该说，这是一个非常简化的大型应用程序示例，其中我需要的动画用于页面的几个区域，这些区域使用标准CSS进行转换，以具有可折叠的内容区域，当这些区域从高度0变为自动高度时，需要使用javascript执行。在CSS中，如果不使用我试图避免的最大高度攻击，这是无法实现的。不过，我的主要观点是表明JavaScript动画在某些情况下似乎失败了。我还在angular github网站上提交了一份错误报告：

<file name="script.js">
    angular.module('ngViewExample', ['ngRoute', 'ngAnimate'],
      function($routeProvider, $locationProvider) {
        $routeProvider.when('/Book/:bookId', {
          templateUrl: 'book.html',
          controller: BookCntl,
          controllerAs: 'book'
        });
        $routeProvider.when('/Book/:bookId/ch/:chapterId', {
          templateUrl: 'chapter.html',
          controller: ChapterCntl,
          controllerAs: 'chapter'
        });

        // configure html5 to get links working on jsfiddle
        $locationProvider.html5Mode(true);
    });

    function MainCntl($route, $routeParams, $location) {
      this.$route = $route;
      this.$location = $location;
      this.$routeParams = $routeParams;
    }

    function BookCntl($routeParams) {
      this.name = "BookCntl";
      this.params = $routeParams;
    }

    function ChapterCntl($routeParams) {
      this.name = "ChapterCntl";
      this.params = $routeParams;
    }
  </file>