36

angularJS v1.2 で angular-ui-router を使用しており、カスタム ページ遷移を実装したいと考えています。ng-view (標準的な方法) ではなくui-view ( angular-ui-router
から) で ng-animate を使用するにはどうすればよいですか? ng-view の参照については、AngularJS 1.2 のリマスターされたアニメーションを参照してください。

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

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 に取り込む方法がわかりません。

4

8 に答える 8

35

バグは現在クローズされており、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);
}
于 2014-01-21T18:19:59.447 に答える
7

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

たとえば、「スライド」クラスを ui-view に追加するだけです

<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 要素に追加することで回避しました。

于 2014-01-17T19:15:13.650 に答える
3

週末に、 と の両方のビュー アニメーションを示す 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には、主要なビュー アニメーションのバグが修正されています。

于 2014-02-08T19:04:17.220 に答える
3

UI Router で 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;
    }
}
于 2016-01-21T00:03:56.313 に答える
2

またはその要素のview名前は避けてくださいnamed-viewsid。

たとえば、これがあなたの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*/
}

幸運を。

于 2016-06-28T06:04:40.857 に答える
1

誰かが投稿で言ったように。ルーターのAngular 1.2ブランチがあり、それを機能させるパッチがあります。私は、Angular 1.2.6 ng-animate 1.2.6 と 0.2.0 ベータ ブランチ 1.2 の特別な ui-router ビルドを使用すると機能することを知っています... UI ビューをフェードアウトします。

問題は、ベータ ブランチの angular ルーターを「ビルド」する必要があることです。git から tarball をダウンロードするだけでは機能せず、ダウンロードする必要があります。それをビルドします。その後、カスタム ui-router が作成されます。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 のパスビンです。試してみてください。ブーム！

0.2.0 Angular-ui-router カスタム ビルド

于 2013-12-30T18:42:06.973 に答える
1

AngularMotion https://github.com/mgcrea/angular-motionを使用して、これを CSS に追加するだけです...

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

am-fadeng-view div のクラス (私の場合) にアニメーションを追加します

于 2014-10-02T00:36:00.483 に答える