web-dev-qa-db-ja.com

JQueryで作成された新しい要素を強調するCSS3遷移

CSS3の色遷移を使用して、JQueryを使用してマークアップに追加された新しい要素にハイライトフェードカラー効果（黄色から透明）を適用します。

CSS

#content div {
    background-color:transparent;
    -moz-transition:background-color 2s;
    -webkit-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s;
}

#content div.new {
    background-color:yellow;
}

HTML

<div id="content"></div>
<a id="add-element" href="#">add new element</a>

JS

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    newElement.removeClass('new');
});

リンクをクリックすると、新しい要素が作成されます。そのクラスは「新規」（背景色は黄色）で、HTMLマークアップに追加されます。 「新しい」クラスをすぐに削除して、背景色を透明（または他の色）に移行させることができるはずです。新しい要素の背景色がすぐに透明になり、遷移効果がないため、明らかに間違っています。 JQuery UIでこれを実行できることはわかっていますが、CSS3トランジションを使用したいと思います。

ここにjsfiddle：

http://jsfiddle.net/paulaner/fvv5q/

jquerycsscss-transitionstransition
31
Paulaner

これをcss3アニメーションで機能させることができました：

@-webkit-keyframes yellow-fade {   
   0% {background: yellow;}
   100% {background: none;}
}

@keyframes yellow-fade {
   0% {background: yellow;}
   100% {background: none;}
}

.highlight {
   -webkit-animation: yellow-fade 2s ease-in 1;
   animation: yellow-fade 2s ease-in 1;
}

強調表示クラスを新しい要素に適用するだけです：

$('#add-element').click(function() {

    var newElement = $('<div class="highlight">new element</div>');

    $('#content').append(newElement);

});

IE 10、Chrome、Safari、および最新のFFでテストしましたが、そこで動作します。IE 9以下では動作しません...

http://jsfiddle.net/nprather/WKSrV/3/

この方法は、Safari Books Onlineのこの本から入手しました。 http://my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b-61cb0fb7756d&cid=shareLink

32
Nathan Prather

コードはほぼ完璧です。移行を機能させるには、何かをトリガーする必要があります。これは、スクリプトに1行のコードを追加することで実行できます。

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    // trigger on focus on newly created div
    newElement.focus();

    newElement.removeClass('new');
});

http://jsfiddle.net/UXfqd/

22
Rezigned

醜いハックですが、動作するようです。もっと良い方法があると確信しています。

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    setTimeout(function(){
        newElement.removeClass('new');
    },0);
});

http://jsfiddle.net/fvv5q/22/

4
Andy