7

私はアニメーション化できないようですng-cloak。基本的に、私はdiv from .containter.ng-cloak to .container.ng-bindingをアニメーション化しようとし ていますが、うまくいかないようです — Angularはルールを無視してdivwithcontainer ng-bindingクラスをすぐにロードします。transition

transition-delayサイコロなしで、数秒に設定し てみました。

HTML

<div class="container ng-cloak" ng-controller="AppCtrl">

CSS

.container.ng-cloak,
.container.ng-binding {
    opacity: 0;
    transition: opacity 800ms ease-in-out;
}
.container.ng-binding {
    opacity: 1;
}

注目に値する:

  • background-color青から赤への移行は期待どおりに機能しているように見えました。
  • 簡潔にするために、ベンダー プレフィックスは省略しました。

前もって感謝します。

4

4 に答える 4

10

別のアプローチ:

http://jsfiddle.net/coma/UxcxP/2/

HTML

<section ng-app>
    <div ng-class="{foo:true}"></div>
</section>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: red;
    opacity: 0;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

div.foo {
    opacity: 1;
}

Angular はロードされるまで foo クラスを設定しないため、これは cloak のように機能します。

クロークは、Angular がテンプレート プロセスの結果に置き換えるまで (クラス、属性、要素などとして) そこに存在するため、必要に応じて機能しません。したがって、同じノードではなく、それが理由です。遷移を取得しません (遷移は同じ要素が変更されたときに発生します)、変更されていない、同じノードではないだけです。

これを見てください：

http://jsfiddle.net/coma/UxcxP/5/

その例でわかるように、Angular が行われる前でも同じ div であるため、"angularized" されている div の隣の div はフェード アニメーションを取得しています。

于 2013-08-12T19:17:01.370 に答える
9

受け入れられた答えがあることに気づきました。ただし、これはng-cloak最初に試みたディレクティブで実行可能です。

Jade が生成したマークアップをアニメーション化するために使用します。あなたの走行距離は、Angular ランタイム テンプレート マークアップによって異なる場合があります。

http://codepen.io/simshanith/pen/mqCad

HTML

<div class="container ng-cloak fade-ng-cloak" ng-controller="AppCtrl">

CSS

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}
.fade-ng-cloak {
  opacity: 1;
  -ms-filter: none;
  -webkit-filter: none;
          filter: none;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.fade-ng-cloak[ng-cloak] {
  display: block !important;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
.fade-ng-cloak.ng-cloak,
.fade-ng-cloak.ng-binding {
    opacity: 0;
    transition: opacity 800ms ease-in-out;
}
.fade-ng-cloak.ng-binding {
    opacity: 1;
}
于 2014-11-04T02:12:17.420 に答える
0

私の解決策は他のいくつかの解決策と似ていますが、私のユースケースでは、角度がバインドされていない div でクロークを使用する必要があったため、これが私がやったことです...

(簡潔にするためにブラウザのプレフィックスは省略されています)

CSS

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
    display: none !important;
}

.fade-ng-cloak {
    display: block !important;
    opacity: 1;
    transition: opacity 0.5s;
}

.fade-ng-cloak.ng-cloak {
    opacity: 0;
}

HTML

<div class="row ng-cloak fade-ng-cloak">
    <div class="col-xs-12">
        <uib-accordion close-others="true">
            ...
        </uib-accordion>
    </div>
</div>
于 2016-09-27T18:53:49.743 に答える