Javascript AngularJS-为ng视图过渡设置动画

我有两个html页面，

welcome.html

和

login.html

，这两个页面都是通过

ngview

属性和路由器提供者“插入”到

index.html

中的，这取决于URL，作为我AngularJS应用程序的一部分

这方面的一个例子可以在“连接后端”下找到

---

我的问题：有没有办法在

welcome.html

和

login.html

之间设置转换动画？

我不确定是否有办法直接使用AngularJS执行此操作，但您可以将welcome和login的显示设置为none，并在加载后使用指令设置不透明动画

我会这样做的。2条指示，用于在单击链接时淡入内容和淡出内容。淡出指令可以简单地为具有唯一ID的元素设置动画，或者调用广播淡出的服务

模板：

<div class="tmplWrapper" onLoadFadeIn>
    <a href="somewhere/else" fadeOut>
</div>

服务：

angular.factory('Fading', function() {
  var news;
  news.setActiveUnit = function() {
    $rootScope.$broadcast('fadeOut');
  };
  return news;
})

我只是快速地整理了这段代码，所以可能会有一些错误：）

检查这段代码：

Javascript:

CSS:

主页HTML:

部分HTML示例：

---

更新从angularjs 1.2开始，动画的工作方式发生了巨大变化，现在大部分动画都由CSS控制，无需设置javascript回调等。。你可以查一下电话号码@dfsq在评论a中指出

试试看他的帖子。它展示了如何使用AngularJS的ngRoute和ngAnimate实现网页之间的转换：

1.Install

2.将动画效果添加到用于页面输入动画的类

ng enter

，以及用于页面退出动画的类

ng leave

---

供参考：本页有一个关于角度视图转换的免费资源

有关一些想法，请参阅。您能针对使用

ng视图

和html页面之间的转换定制您的答案吗？谢谢@格雷格，我不知道你把它裁剪成ng view是什么意思。我认为ng视图不能进行转换。我不确定，但您可以增强ng view指令或创建自己的帮助器指令，如上图所示。如果现在加载welcome，onLoadFadeIn指令可以在html中淡出，单击链接后，它将淡出。您还需要什么？是的，我想我希望ng view指令能够直接纳入其中。谢谢您的时间。我想在这种情况下，我会创建一个新的ng视图，并使用淡入淡出功能对其进行增强：）这非常好。只有一个问题：上一个视图在这个视图出现之前就消失了，因此它不会真正过渡到上一个视图。在上，他们似乎不使用视图进行路由，但对从一开始就加载的每个片段都有指令。@Mortimer artcopycode.com做了一些与主题完全不同的事情，更容易执行。这就是我的观点，他们做主题中要求的事情：在单页应用程序中插入不同的片段，并设置片段变化的动画。但是他们没有在视图之间使用ng视图和动画（这并不容易，因为在新视图出现之前旧视图已从DOM中删除），而是在路由中使用指令（保留控制器和模板）。截至目前，我找不到1.1.4可供下载。我猜他们错过了4月3日的发布日期？是的，我猜他们忘了更新他们的网站，但是如果你转到顶部菜单栏的下载链接，你可以找到它。这里有一个很好的教程：1.2更改使这一方法更容易。有一篇更新的帖子，由yearofmoo发布，你需要查看。我还创建了一个

ngView

动画演示，可能会让你感兴趣。

angular.factory('Fading', function() {
  var news;
  news.setActiveUnit = function() {
    $rootScope.$broadcast('fadeOut');
  };
  return news;
})

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"
    });
}

.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;
}

<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController">
</div>

<div id="part1" class="fragment {{transitionState}}">
</div>