52

私は 2 つの html ページを持っておりwelcome.html、login.htmlどちらもAngularJS アプリの一部として、属性とルーター プロバイダーindex.htmlを介して URL に依存して「挿入」されています。ngview

この例は、AngularJS ホームページのWire up a Backend にあります。

私の質問: と の間の遷移をアニメーション化する方法はwelcome.htmlありlogin.htmlますか?

4

5 に答える 5

16

Check this code:

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

Main page HTML:

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

Partials HTML example:

<div id="part1" class="fragment {{transitionState}}">
</div>
于 2013-01-23T18:27:38.740 に答える
5

AngularJS で直接行う方法についてはわかりませんが、ようこそとログインの両方で表示を none に設定し、ロードされたらディレクティブで不透明度をアニメーション化できます。

私はそのように何らかの方法でそれを行います。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 を使用して Web ページ間の遷移を実装する方法を示します: AngularJS と CSS を使用して iPhone スタイルの Web ページ遷移を作成する方法

于 2014-03-30T12:10:06.250 に答える
-1

1.angular -animateをインストール

ng-enter2.ページ移行アニメーションのクラスng-leaveとページ終了アニメーションのクラスにアニメーション効果を追加する

参考までに: このページには角度ビュー遷移に関する無料のリソースがあります https://e21code.herokuapp.com/angularjs-page-transition/

于 2015-12-12T00:05:19.923 に答える