52

我有 2 个 html 页面，作为我的 AngularJS 应用程序的一部分，welcome.html这两个页面都通过属性和路由器提供程序login.html“插入”到index.html依赖于 URL中。ngview

这方面的一个例子可以在AngularJS 主页的Wire up a Backend下找到。

我的问题：有没有办法为welcome.html和之间的过渡设置动画login.html？

4

5 回答 5

70

Angularjs 1.1.4 现在引入了该ng-animate指令来帮助动画不同的元素，特别是 ng-view。

您还可以观看有关此新功能的视频

从angularjs 1.2 开始更新，动画的工作方式发生了巨大变化，现在大部分都由 CSS 控制，无需设置 javascript 回调等。您可以查看Year Of Moo 上的更新教程。@dfsq 在评论中指出了一组很好的例子。

于 2013-04-04T16:10:04.130 回答
16

检查此代码：

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>
于 2013-01-23T18:27:38.740 回答
5

我不确定直接使用 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;
})

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

于 2012-10-26T13:21:39.193 回答
1

试试看他的帖子。它展示了如何使用 AngularJS 的 ngRoute 和 ngAnimate 实现网页之间的转换：How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

于 2014-03-30T12:10:06.250 回答
-1

1.安装角度动画

ng-enter2.页面进入动画类ng-leave和页面退出动画类添加动画效果

for reference: this page has a free resource on angular view transition https://e21code.herokuapp.com/angularjs-page-transition/

于 2015-12-12T00:05:19.923 回答