部分视图中的动画不起作用

Question

我正在尝试使用 ng-view 在视图之间产生简单的幻灯片效果。我不确定我是否做得对。代码如下：

脚本：(1.15)

<script src="js/lib/angular-1.1.5/angular.min.js"></script>

路由：

app.config(function ($routeProvider) {
   $routeProvider.
      when("/", { templateUrl: "partials/loading.html" }).
      when("/session", {templateUrl: "partials/session.html", controller: "TimerController" }).
      when("/settings", { templateUrl: "partials/settings.html", controller: "SettingsController" }).
      otherwise({ redirectTo: "/" });

包含用于切换视图的 ng-view 和 ng-click 的 HTML：

<div class="flex-container viewport">

<div class="flex-item-1">

  <div>
    <button class="overlay btn icon-cog" ng-click="changeView('/settings')" type="button"></button>   
  </div>  

</div>


<div ng-view  class="flex-item-2" ng-animate="{enter: 'enter', leave: 'leave'}"></div>


<div class="flex-item-3">

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(3)">
      <span>3</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(5)">
      <span>5</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(10)">
      <span>10</span>
    </button>        
  </div>

  <div>
    <button class="btn btn-5 btn-5a icon-cog"  ng-click="setTimer(15)">
      <span>15</span>
    </button>        
  </div>

</div>

用于切换视图的控制器 fn：

    $scope.changeView = function (view) {
    $location.path(view);
};

用于实现动画效果的CSS：

.enter-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(100%,0,0);
}
.enter-setup.enter-start {
   position:absolute;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup {
   position:absolute;
   -webkit-transition: 3.3s ease-out all;
   -webkit-transform:translate3d(0,0,0);
}
.leave-setup.leave-start {
   position:absolute;
   -webkit-transform:translate3d(-100%,0,0);
}

内容仍然显示（但现在闪烁）并且幻灯片动画不起作用。任何帮助将不胜感激。

更新：我将 css 语法修复为 1.15。不幸的是，它仍然无法正常工作。我正在使用 flexbox，我认为这是问题的原因。有人在使用 ng-animate + flexbox 时遇到过类似的问题吗？

Answer 1

您使用的是1.1.5 版本，但您使用的CSS sintaxe 来自1.1.4。

正确的是 enter-active 而不是 enter-start 并且只是 enter 而不是 enter-setup

看看1.1.5 documentation

并在NG Animate Sample Site查看一些样品

如果您只使用-webkit-transform，这将仅适用于 chrome 和 safari...也添加其他供应商。