如何在使用 $location.path 到 AngularJS 中的重定向之间进行动画转换？答案

【问题标题】：How do I have animation between transition using $location.path to Redirect in AngularJS?如何在使用 $location.path 到 AngularJS 中的重定向之间进行动画转换？
【发布时间】：2016-01-04 13:08:06
【问题描述】：

我使用 AngularJS 作为我的结构和后端，使用 JqueryM 作为 UI。

我已经使用 $location.path 使用 ng-click 进行重定向。有没有办法可以使用 JQM 数据转换或 Ng-animate 来获得转换？

【问题讨论】：

标签： javascript jquery angularjs jquery-mobile

【解决方案1】：

我从 ngAnimate 和 ngView 文档中得到了很多。

如果您在 css 中设置动画...

.fade.ng-enter { transition:0.5s linear all; opacity:0; }
.fade.ng-enter.ng-enter-active { opacity:1; }
.fade.ng-leave { transition:0.0s linear all; opacity:1; }
.fade.ng-leave.ng-leave-active { opacity:0; }

并在您的 ng-view 元素中引用该类...

<div ng-view class="fade"></div>

别忘了包含动画库...

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>

并将其添加到您的模块中...

angular.module('myApp', ['ngRoute', 'ngAnimate'])

那么你的动画应该可以工作了。

这是一个快速而肮脏的工作示例。它也住在plunker：

<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
  <script type="text/ng-template" id="page-one.html"><div>PAGE ONE</div></script>
  <script type="text/ng-template" id="page-two.html"><div>PAGE TWO</div></script>
  <script>
  angular.module('myApp', ['ngRoute', 'ngAnimate'])
    .controller('MyController', ['$scope', '$location', function ($scope, $location) {
        $scope.location = $location;
    }])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/page-one', { templateUrl: 'page-one.html' })
      .when('/page-two', { templateUrl: 'page-two.html' })
    }]);
  </script>
<style>
.fade.ng-enter { transition:0.5s linear all; opacity:0; }
.fade.ng-enter.ng-enter-active { opacity:1; }
.fade.ng-leave { transition:0.0s linear all; opacity:1; }
.fade.ng-leave.ng-leave-active { opacity:0; }
</style>
</head>
<body ng-controller="MyController">
  <button ng-click="location.path('/page-one')">Page One</button>
  <button ng-click="location.path('/page-two')">Page Two</button>
  <div ng-view class="fade"></div>
</body>
</html>

【讨论】：

嗨！非常感谢您的回复...我尝试过关注，但是每当我包含
时，它会在我尝试运行该页面时使我的应用程序崩溃。这可能是什么原因？
检查您的浏览器控制台，看看是否有任何消息可以指出您的问题。另外，请尝试查看 plunker 版本是否有效。如果是这样，则可能是您的开发环境有问题。如果不是，则可能是您的浏览器。
是否可以将淡入淡出类应用于 ngView 的孩子？在我的应用程序中，当我执行 $location 时，它只会更新整个应用程序中的一个元素，我只想淡入和淡出该区域。有可能吗？