web-dev-qa-db-ja.com

AngularJS-ng-viewトランジションのアニメーション化

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

この例は、 AngularJSホームページ underBackendで確認できます。

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

javascriptangularjsanimationurl-routing
52
Greg

Angularjs 1.1.4では、さまざまな要素、特にng-viewのアニメーション化に役立つng-animateディレクティブが導入されました。

この新しい機能についてのビデオも見ることができます

の更新_（-===-）アニメーションの動作方法が大幅に変更され、JavaScriptコールバックを設定することなく、ほとんどがCSSで制御されるようになりました。など。 Moo of Yearの更新されたチュートリアル を確認できます。 @dfsqはコメントa 例の素敵なセット で指摘しました。

69
Mortimer

このコードを確認してください：

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>

Partials HTMLの例：

<div id="part1" class="fragment {{transitionState}}">
</div>
16
madhead

私は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;
})

このコードをすぐにまとめたので、バグがあるかもしれません:)

5
F Lekschas

彼の投稿をチェックしてみてください。 AngularJSのngRouteとngAnimateを使用してWebページ間の遷移を実装する方法を示します。 AngularJSとCSS を使用してiPhoneスタイルのWebページ遷移を作成する方法

1
ice.cube