我有 2 个 html 页面，welcome.html 和 login.html 作为一部分，它们都通过 ngview 属性和路由器提供商“插入”到 index.html 中，具体取决于 URL我的 AngularJS 应用程序。
可以在 Wire up a Backend 下的 the AngularJS home page 上找到这方面的一个示例。
我的问题：有没有办法为welcome.html 和login.html 之间的过渡设置动画？
【问题讨论】：
标签： javascript angularjs animation url-routing
You can also watch the video about this new featue
更新 从 angularjs 1.2 开始，动画的工作方式发生了巨大变化，现在大部分都由 CSS 控制，无需设置 javascript 回调等。您可以查看updated tutorial on Year Of Moo . @dfsq 在 cmets 中指出了 nice set of examples。
【讨论】：
ngView 动画的演示，check 可能会感兴趣。
检查此代码：
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 的方法，但您可以将欢迎和登录的显示设置为无，并在加载后使用指令为不透明度设置动画。
我会这样做。 2 用于淡入内容和在单击链接时淡出内容的指令。淡出指令可以简单地为具有唯一 ID 的元素设置动画或调用广播淡出的服务
模板：
<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;
})
我只是快速整理了这段代码，所以可能会有一些错误:)
【讨论】：
ng-view 和html 页面之间的转换来调整您的答案？谢谢！
尝试查看他的帖子。它展示了如何使用 AngularJS 的 ngRoute 和 ngAnimate 实现网页之间的转换：How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS
【讨论】：
1.安装angular-animate
2.将动画效果添加到类ng-enter页面进入动画和类ng-leave页面退出动画
供参考：此页面有一个关于角度视图转换的免费资源https://e21code.herokuapp.com/angularjs-page-transition/
【讨论】：