AngularJS - 动画视图过渡(AngularJS - Animate ng-view tr

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

这方面的例子上可以找到的AngularJS主页 线建立一个后端下。

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

Answer 1:

Angularjs 1.1.4现已推出的ng-animate指导，以帮助动画不同的元素，尤其是NG-视图。

您还可以观看这个新featue视频

UPDATE作为angularjs 1.2，一路动画的工作发生了巨大变化，大部分现在正与CSS控制，而无需设置JavaScript的回调，等等。你可以检查上年度武更新教程。 @dfsq在评论中指出一组漂亮的例子。

Answer 2:

检查此代码：

使用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>

Answer 3:

我不知道的方式直接与AngularJS做，但你可以设置显示为无，都欢迎和登录，一旦被加载的指令动画的不透明度。

我会做一些方法，像这样。 2个指令在内容衰落和衰落出来点击一个链接时。对于fadeouts该指令可以简单动画一个元件都具有唯一的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;
})

我只是有这个代码迅速放在一起所以可能会有一些错误:)

Answer 4:

请检查自己的岗位。它显示了如何实现使用AngularJS的ngRoute和ngAnimate网页之间的转换：如何使iPhone风格的Web页面过渡使用AngularJS和CSS

Answer 5:

1.安装角有生

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

供参考：此页对角视图转变是免费的资源https://e21code.herokuapp.com/angularjs-page-transition/

文章来源: AngularJS - Animate ng-view transitions