AngularJS - Animate ng-view过渡

Question

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

可以在AngularJS主页的Wire up a Backend下找到此示例.

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

Answer 1

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

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

从angularjs 1.2 更新,动画的工作方式发生了巨大的变化,现在大部分都是用CSS控制的,无需设置javascript回调等.你可以查看Moo年份的更新教程.@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;
})

我刚刚快速汇总了这段代码,所以可能会有一些错误:)