1

私の CSS ファイルでは、divトランジション用のクラスを定義しています。

div.BlackOut {
 -webkit-transition-property: opacity;
    -webkit-transition-duration: 2s;
}

次に、私の JavaScript で (jQuery 経由で) 動的な dom 要素を追加します。

var cssObj = {
   'background-color' : '#000',
   'width' : '100%',
   'height' : '400px',
   'position' : 'absolute',
   'top' : 0,
   'z-index' : '9998'
  };
var element = $("<div>").css(cssObj).addClass('BlackOut').appendTo( 'body' );
element.get(0).style.opacity = 0;

しかし、移行は開始されません。

なんで？

4

2 に答える 2

1

私は同じ問題に遭遇し、変換が行われることを発見しましたが、トランジションは実行されません - アニメーションはありません。要素がDOMにある前にトランジションを実行しようとすると、変換を実行している間、トランジションが無視されるようです。それがバグなのか仕様によるものなのか、私には十分にわかりません。

とにかく、新しい要素が画像の場合は、loadイベントを介してトランジション/css クラスを追加できます。

ただし、sans-url 要素が DOM に追加されたときに発生するイベントを見つけることができませんでした。私はタイムアウトにフォールバックすることを選択しました。これはあなたにも役立つはずです。

コードは次のようになります。

var element = $("<div id='BlackOutDiv'></div>").css(cssObj).appendTo( 'body' );
setTimeout(function() {
  $('#BlackOutDiv').addClass('BlackOut');
}, 100);
于 2012-02-07T09:32:06.467 に答える
0

イージングまたはおそらくが必要だと思いますopacity。そう：

div.BlackOut {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
}

それはうまくいくはずですが、他のブラウザー (たとえば FF 4) を含めるために、css を将来的に証明したい場合もあります。

div.BlackOut {
    opacity: 1;
    -webkit-transition: opacity 2s ease-out;
     -khtml-transition: opacity 2s ease-out;
       -moz-transition: opacity 2s ease-out;
         -o-transition: opacity 2s ease-out;
            transition: opacity 2s ease-out;
}
于 2011-02-22T15:38:01.267 に答える