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 ......也可以添加其他供应商。

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

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

1 个答案: