web-dev-qa-db-ja.com

ng-viewではなくui-viewでng-animateを使用するにはどうすればよいですか？

AngularJS v1.2でangle-ui-routerを使用していますが、カスタムページ遷移を実装したいと思います。
ng-view（標準の方法）ではなく、ng-animateをui-view（ angular-ui-router から）で使用するにはどうすればよいですか？ ng-viewのリファレンスについては、 AngularJS 1.2のリマスターアニメーション を参照してください。

編集：私は角度の2つの異なるバージョンを試しました：コメントで示唆されているようにv1.2.0-rc.2とv1.2.0-rc.3ですが、どちらもトリックをしないようです。私は何か間違ったことをしていると思いますか？

HTMLは次のとおりです。

<div ui-view class="slide"></div>

およびCSS：

.slide {
    width:1024px;
    height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    border: 1px solid blue;
}

.slide.ng-enter.ng-enter-active {
    border: 1px solid red;
}

前述の例の JSfiddle を追加しました。 ng-viewとui-viewをカバーするようにこの例を拡張するのはいいことですが、ng/ui-viewとパーシャルをJSfiddleに取り込む方法はわかりません。

angularjsangularjs-directiveangular-ui-routerng-animate
36
Per Quested Aronsson

バグはクローズされ、ui-router Wiki にエントリが追加されました。デモ Plunkr も含まれています。 URLが古くなった場合に備えて、ここにコード例をコピーします。

HTML：

<div class="row">
   <div class="span12 ui-view-container">
      <div class="well" ui-view></div>        
   </div>
</div>

CSS：

/* Have to set height explicity on ui-view 
to prevent collapsing during animation*/
.well[ui-view]{
 height: 65px; 
}

.ui-view-container {
  position: relative;
}

[ui-view].ng-enter, [ui-view].ng-leave {
  position: absolute;
  left: 0;
  right: 0;
  -webkit-transition:all .5s ease-in-out;
    -moz-transition:all .5s ease-in-out;
    -o-transition:all .5s ease-in-out;
    transition:all .5s ease-in-out;
}

[ui-view].ng-enter {
  opacity: 0;
  -webkit-transform:scale3d(0.5, 0.5, 0.5);
  -moz-transform:scale3d(0.5, 0.5, 0.5);
  transform:scale3d(0.5, 0.5, 0.5);
}

[ui-view].ng-enter-active {
  opacity: 1;
  -webkit-transform:scale3d(1, 1, 1);
  -moz-transform:scale3d(1, 1, 1);
  transform:scale3d(1, 1, 1);
}

[ui-view].ng-leave {
  opacity: 1; 
  -webkit-transform:translate3d(0, 0, 0);
  -moz-transform:translate3d(0, 0, 0);
  transform:translate3d(0, 0, 0);
}

[ui-view].ng-leave-active {
  opacity: 0;
  -webkit-transform:translate3d(100px, 0, 0);
  -moz-transform:translate3d(100px, 0, 0);
  transform:translate3d(100px, 0, 0);
}
35
Per Quested Aronsson

これはUI Router 0.2.8で修正されたようです。私はAngularJS v1.2.7を使用しています。

たとえば、「slide」クラスをUIビューに追加するだけです

<div ui-view class="slide">

そして、アニメーションに次のcssを使用します。

.slide {
    -webkit-transition: -webkit-transform .7s ease-in-out;
    -moz-transition: -moz-transform .7s ease-in-out;
    -o-transition: -o-transform .7s ease-in-out;
    transition: transform .7s ease-in-out;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide.ng-enter.ng-enter-active, .slide.ng-leave {
    position: absolute;
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.slide.ng-leave.ng-leave-active {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

さらに、一部のアニメーションは、$ uiViewScrollのために奇妙な動作をしているように見えました。 autoscroll = "false"をui-view要素に追加することで回避しました。

7
Ben Wilde

UIルーターでngAnimate（1.4.8）を使用するための 作業デモのチュートリアル を投稿しました。

いくつかの異なるビューアニメーション、メインビューでのフェードイン遷移、ネストビューでのスライドイン/アウト遷移が表示されます。

メインビューのフェードイントランジションのLESSファイルからの抜粋を次に示します。

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

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

    /* end 'enter' transition */
    &.ng-enter-active {
        /* end with opacity 1 (fade in) */
        opacity: 1;
    }
}
3
Jason

週末に、両方のビューアニメーションを示す2つのプランクを作成しましたui-viewおよびng-view

ui-view： http://plnkr.co/edit/jpebBk?p=preview

ng-view： http://plnkr.co/edit/LQhVYU?p=preview

angular-ui-router 0.2.8 主要なビューアニメーションのバグが修正されました

3
Kamweti

その要素のnamed-viewsまたはviewのid名を避ける。

たとえば、これがhtmlの場合

<div id="home-page" ui-view="home">
  <!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>

の代わりに：

/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
    /*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

試してください：

div[ui-view].ng-enter {
    /*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
    /*...ENTER-ACTIVE-STYLES*/
}

がんばろう。

2
Akash

誰かが animate.css を Angular および I-Router とともに使用したい場合は、これを以下で簡単に行うことができます。これは、Angular 1.2.21およびUI-Router 0.2.10を使用してのみテストされていることに注意してください。

FadeInDownを入力アニメーションとして使用し、FadeOutDownを終了アニメーションとして使用する例animate.cssのアニメーションのアニメーション名を入れ替えるだけです。また、これをdivコンテナに配置して、位置を相対に設定することもできます。

HTML：

<div data-ui-view class="fade"></div>

CSS：

.fade.ng-enter, .fade.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.fade.ng-enter {
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
}

.fade.ng-leave {
   -webkit-animation-name: fadeOutDown;
   animation-name: fadeOutDown;
}

代わりにbounceInDownおよびbounceOutDownを使用する別の例：

HTML：

<div data-ui-view class="bounce"></div>

CSS：

.bounce.ng-enter, .bounce.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.bounce.ng-enter {
   -webkit-animation-name: bounceInDown;
   animation-name: bounceInDown;
}

.bounce.ng-leave {
   -webkit-animation-name: bounceOutDown;
   animation-name: bounceOutDown;
}

編集：@kamwetiのフォークを作成しました Plunker animate.cssで例を視覚化します。

1
Justin

AngularMotionの使用 https://github.com/mgcrea/angular-motion その後、これをcssに追加するだけです...

div[ng-view].ng-leave-active {
    display: none !important;
}

アニメーションをクラスに追加します（am-fade私の場合）ng-view divの

1
dsmithco

誰かが投稿で言ったように。 angular 1.2動作するようにするパッチがあるルーターのブランチがあります。Angular 1.2.6 ng-animate 1.2 .6および0.2.0ベータブランチ1.2の私の特別なui-routerビルドは動作します...フェードui-views .. inおよびout。

問題は、ベータブランチを「ビルド」する必要があることです。angular router .. gitからtarballをダウンロードするだけでは機能せず、動作します。それから、カスタムUIルーターがあります。javascriptのui-routerヘッダーを見てください。

/**
 * State-based routing for AngularJS
 * @version v0.2.0-dev-2013-10-05
 * @link http://angular-ui.github.com/
 * @license MIT License, http://www.opensource.org/licenses/MIT
 */

あなたのバージョンは0.2.0-dev-2013-10-05と言いますか？その日付は、私がコンパイルした日付です。あなたの日付はあなたのものに関連するはずです..javascriptのヘッダーに表示されない場合、マスターと同じ0.2.0バージョンを使用しているだけで、1.2アニメーションを動作させるために特別なものは使用していません...

以下は、1.2で動作するコンパイル済みのui-routerのパスビンです。ブーム！

.2.0 Angular-ui-routerカスタムビルド

1
Zuriel