Question

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

可以在连接后端下的the AngularJS home page上找到此示例。

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

Answer 1

Angularjs 1.1.4 has now introduced the ng-animate directive to help animating different elements, in particular ng-view.

You can also watch the video about this new featue

UPDATE 从angularjs 1.2开始，动画的工作方式发生了巨大变化，现在大部分都是用CSS控制的，无需设置javascript回调等。你可以查看{{3 }}。 @dfsq在评论中指出了updated tutorial on Year Of Moo。

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＆＃39; ngRoute和ngAnimate实现网页之间的转换：How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

Answer 5

1.安装angular-animate

2.将动画效果添加到类ng-enter以进行页面输入动画，将类ng-leave添加到页面退出动画

供参考：此页面有一个关于角度视图转换的免费资源https://e21code.herokuapp.com/angularjs-page-transition/

AngularJS - Animate ng-view过渡

5 个答案: