web-dev-qa-db-ja.com

ui-routerの状態遷移間のフェードアニメーション

Webアプリケーションでui-routerを使用しています。ルートdivコードは次のとおりです。

<div ui-view="content" class="fade-in-up"></div>

ある状態から別の状態に移行すると（下のスクリーンショットの/ ordersから/ feedbacks）、新しい状態のフェードアニメーションが終了する前に、最初の状態が非表示になりません。

Screenshot

私のCSSは：

 @-webkit-keyframes fadeInUp {
  0% {
opacity: 0;
-webkit-transform: translateY(15px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(15px);
}
 100% {
  opacity: 1;
  -moz-transform: translateY(0);
 }
 }
 @-o-keyframes fadeInUp {
 0% {
opacity: 0;
 -o-transform: translateY(15px);
}
100% {
  opacity: 1;
  -o-transform: translateY(0);
  }
  }
  @keyframes fadeInUp {
  0% {
   opacity: 0;
  transform: translateY(15px);
 }
 100% {
  opacity: 1;
   transform: translateY(0);
    }
  }
  .fade-in-up {
    -webkit-animation: fadeInUp .5s;
    animation: fadeInUp .5s;
  }

私はどこが間違っていますか？

angular-ui-routerng-animate
6
Burak

動作するデモを含むチュートリアルCSSトランジションでngAnimateを使用してこれを行う方法を示したチュートリアルを投稿しました。

デモにはいくつかの遷移があります。これは、メイン要素の新しいビューでフェードインするためのCSSスニペットです。

/* start 'enter' transition on main view */
main.ng-enter {
    /* transition on enter for .5s */
    transition: .5s;

    /* start with opacity 0 (invisible) */
    opacity: 0;
}

/* end 'enter' transition on main view */
main.ng-enter-active {
    /* end with opacity 1 (fade in) */
    opacity: 1;
}

.ng-enterにはトランジションのみがあり、.ng-leaveにはありません。これにより、新しいビュー（入っている）がフェードインし、古いビュー（出ている）がトランジションなしで即座に消えます。

12
Jason

ui-routerは、着信ビューの入力と同時にui-viewルート変更ビューを起動します。したがって、取得されるのは、前のui-viewが引き続き表示され、次のui-viewが表示されることです。レンダリングされ、ビューをアニメーション化する場合は、古いビューと新しいビューの間にオーバーラップの遷移期間があります。古いもののアニメーション化が完了するまで（新しいものをアニメーション化する前に）、新しいui-viewのレンダリングを保留することを検討する必要があります。

ui-router$rootScope状態変更イベントを調べて、これを利用します（ https://github.com/angular-ui/ui-router/wiki#state-change-events ）。

## Hold off on the state change, until current (previous) state has finished animating out
$rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) ->
  console.log "state change start", arguments

$rootScope.$on '$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) ->
  console.log "state change success", arguments

この人の例も見てください http://homerjam.github.io/angular-ui-router-anim-in-out 。彼らは、ui-viewにフックし、変更をenterとleaveに分解するモジュールを作成しました。ここで、アニメーションアウト後に（新しいビューの）アニメーションインをトリガーできます。 （古いビューの） http://homerjam.github.io/angular-ui-router-anim-in-out/anim-in-out.js

この人は、ui-view変更の複製で何が起こっているのかを説明します https://youtu.be/W89DYSthCTQ?t=345

5
twmulloy

クラス「main」をDIVに追加して、次のようにします。

<div ui-view="content" class="main"></div>

次に、このCSSを使用します。

.main.ng-enter {
  transition: 0.25s;
  opacity: 0; }
.main.ng-enter-active {
  opacity: 1; }
.main.ng-leave {
  transition: 0.25s;
  opacity: 1; }
.main.ng-leave-active {
  opacity: 0; }
4
phteven

.ng-enterクラスと.ng-leaveクラス（「ng-animate」モジュールを含めた場合）を使用して、アニメーションをトリガーできます。次に、CSSファイルで次のようなことを行うことができます。

[ui-view].ng-leave {
  animation: fadeOut 0.5s; 
}

[ui-view].ng-enter {
  animation: fadeIn 0.5s;
}

または、変換プロパティと不透明度プロパティに期間を指定して遷移プロパティを設定し、それに応じてng-enterクラスとng-leaveクラスに設定します。

0
mrBorna