web-dev-qa-db-ja.com

ルート遷移AngularJS間のスライド

私はAngularで約1週間作業しているだけなので、コードがくだらない場合はお詫びします。

ルートの遷移間でスライドアクションを作成しようとしています。スライドショーでエフェクトを作成できますが、ルートのトランジション間では作成できません。

とにかく以下のコード：Nav

<li><a ng-click="go('/')"  class = "intro currentLink navLinks">Intro</a></li>
<li><a ng-click="go('/why')"  class = "why navLinks">Why</a></li>
<li><a ng-click="go('/resume')" class = "resume navLinks">Res</a></li>
<li><a ng-click="go('/qualified')" class = "qualified navLinks">How</a></li>
<li><a ng-click="go('/contact')" class = "contact navLinks">Contact me</a></li>

ビュー

<div class = "pages">
    <div ng-view id="slides" ng-animate="'slide'">
        <!--inside main view-->
    </div><!--end main view-->
</div><!--end pages-->

cSS

.slide-leave-setup {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.slide-enter-setup {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.slide-enter-setup {
    position: absolute;
    left: 1300px;
}
.slide-enter-start {
    left: 0;
}
.slide-leave-setup {
    position: absolute;
    left: -1700px;
}
.slide-leave-start {
    right: 0;
}

含む

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.3/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script src="js/vendor/ui-bootstrap-custom-tpls-0.6.0.js"></script>

javascript：

var app = angular.module('MyApp', ['ui.bootstrap', 'ngSanitize', 'ngRoute', 'ngAnimate']);

https://github.com/arttay/blizz の完全なプロジェクト

ありがとうございました

angularjsng-animate
13
Art Taylor

これをグーグルする誰にとっても....

クラスng-enter/ng-leave/.ng-enter-active/.ng-leave-activeをcssクラスに追加します。例

.slide-animate.ng-enter, .slide-animate.ng-leave{
 -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
   -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
 }


.slide-animate.ng-enter.ng-enter-active {
 position: absolute;
 left: 1300px;
}

.slide-animate.ng-enter {
 left: 0;
}

.slide-animate.ng-leave.ng-leave-active {
 position: absolute;
 left: -1700px;
 }

.slide-animate.ng-leave {
 right: 0;
 }

Egghead.io 詳細なチュートリアルが必要な場合は、アニメーションに関する素晴らしいビデオもいくつかあります

19
Art Taylor

上記の答えは正しいです...しかし、末尾にスラッシュがあるルートがあることを追加します：

.when('/introduction/', ...)

トランジションが中断されます... Angularすぐに '/ introduction'にリダイレクトされ、トランジションが中断されます。必ず以下を使用してください：

.when('/introduction', ...)

5時間ほどかけて、私の移行が機能しない理由を最終的に判断しました。テストプロジェクトとすべての例がうまく機能したとき。

2
nawlbergs

Angular 1.2.xを使用している場合、ngAnimateディレクティブは不要になりました。Angular animateは現在、.ng-enterと.ng-leaveをフックとして使用しています以下の記事は、ngviewディレクティブに挿入される各パーシャルとしてルートをアニメーション化することによって、あなたが達成しようとしている方法でアニメーションを実行する新しい方法について学ぶのに非常に役立ちました。

AngularJSアプリのアニメーション：ngView

1
britztopher