1

我正在尝试使用 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 时遇到过类似的问题吗？

4

1 回答 1

2

您正在使用该1.1.5版本，但您使用的 CSS sintaxe 来自1.1.4.

正确的是enter-active代替enter-start和只是enter代替enter-setup

看看1.1.5 文档

并在NG Animate 示例站点查看一些示例

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

于 2013-07-31T14:15:07.190 回答