CSS3 Переход для выделения новых элементов, созданных в JQuery

Я хочу использовать переход по цвету 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>

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

Когда я нажимаю ссылку, создается новый элемент. Его класс "новый" (желтый цвет фона) и добавлен к разметке HTML. Я должен немедленно удалить "новый" класс, чтобы переключить цвет фона на прозрачный (или любой другой цвет). Я, очевидно, делаю это неправильно, так как цвет фона нового элемента сразу отображается как прозрачный, без эффекта перехода. Я знаю, что могу сделать это в пользовательском интерфейсе JQuery, но я бы хотел использовать переходы CSS3.

jsfiddle здесь:

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

Ответ 1

Я смог заставить это работать с анимацией 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://bit.ly/11iVv4M

Ответ 2

Ваш код почти идеален. Вам просто нужно что-то инициировать, чтобы сделать переходный процесс. Это можно сделать, добавив 1 строку кода в ваш script.

$('#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/

Ответ 3

Это безобразный взлом, но он, похоже, работает. Я уверен, что есть лучший способ.

$('#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/