AngularJS – animationng视图转换
我有2个html页面， welcome.html和login.html ，这两个页面都通过ngview属性和路由器提供程序 “插入” index.html依赖的URL，作为我的AngularJS应用程序的一部分。
这个例子可以在Wire up a Backend下的AngularJS主页上find。
我的问题 ：是否有一种方法来使welcome.html和login.html之间的过渡动画？
Angularjs 1.1.4现在引入了ng-animate指令来帮助animation不同的元素，特别是ng-view。
您也可以观看关于这个新function的video
更新为angularjs 1.2，animation的工作方式已经发生了巨大的变化，大部分现在是用CSS控制的，而不必设置JavaScriptcallback等。您可以检查更新的教程在年的Moo 。 @dfsq在评论中指出了一组不错的例子 。
检查这个代码：
Javascript ：
app.config( ["$routeProvider"], function($routeProvider){ $routeProvider.when("/part1", {"templateUrl" : "part1"}); $routeProvider.when("/part2", {"templateUrl" : "part2"}); $routeProvider.otherwise({"redirectTo":"/part1"}); }] ); function HomeFragmentController($scope) { $scope.$on("$routeChangeSuccess", function (scope, next, current) { $scope.transitionState = "active" }); }
CSS ：
.fragmentWrapper { overflow: hidden; } .fragment { position: relative; -moz-transition-property: left; -o-transition-property: left; -webkit-transition-property: left; transition-property: left; -moz-transition-duration: 0.1s; -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s } .fragment:not(.active) { left: 540px; } .fragment.active { left: 0px; }
主页面HTML ：
<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController"> </div>
部分HTML示例 ：
<div id="part1" class="fragment {{transitionState}}"> </div>
我不确定直接使用AngularJS的方法，但是可以将显示设置为none（无论是welcome还是login），并在加载后使用指令对opacity设置animation效果。
我会这样做。 2指令用于淡出内容，并在单击链接时淡出。 fadeouts的指令可以简单地用一个唯一的ID来animation一个元素，或者调用一个广播fadeout的服务
模板：
<div class="tmplWrapper" onLoadFadeIn> <a href="somewhere/else" fadeOut> </div>
指令：
angular .directive('onLoadFadeIn', ['Fading', function('Fading') { return function(scope, element, attrs) { $(element).animate(...); scope.$on('fading', function() { $(element).animate(...); }); } }]) .directive('fadeOut', function() { return function(scope, element, attrs) { element.bind('fadeOut', function(e) { Fading.fadeOut(e.target); }); } });
服务：
angular.factory('Fading', function() { var news; news.setActiveUnit = function() { $rootScope.$broadcast('fadeOut'); }; return news; })
我只是把这个代码快速放在一起，所以可能有一些错误:)
尝试检查他的post。 它展示了如何使用AngularJS的ngRoute和ngAnimate实现网页之间的转换： 如何使用AngularJS＆CSS制作iPhone风格的网页转换
1.安装angularanimation
2.将animation效果添加到页面inputanimation类ng-enter和页面退出animation类ng-leave中
作为参考：这个页面有一个免费的资源angular度视图转换https://e21code.herokuapp.com/angularjs-page-transition/
