Переход 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>

JS

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


transition jquery css css-transitions
person Paulaner    schedule 10.10.2012    source источник

Ответы (3)


arrow_upward
34
arrow_downward

Мне удалось заставить это работать с анимацией 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

person Nathan Prather    schedule 01.06.2013
comment
Это намного лучше и не требует возни со стороны javascript. - person Brendon Muir; 11.06.2014

arrow_upward
23
arrow_downward

Ваш код почти идеален. Вам просто нужно что-то инициировать, чтобы переход заработал. Это можно сделать, добавив 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/

person Rezigned    schedule 10.10.2012
comment
Чисто и просто. Я знал, что для того, чтобы переход заработал, необходимо какое-то событие. - person Paulaner; 10.10.2012
comment
После примерно 3 часов попыток спасибо за помощь :) Любое объяснение, почему он должен быть сфокусирован? - person Jacob Valenta; 05.10.2013
comment
@JacobValenta Я больше не могу найти спецификацию w3c по этому поводу. По сути, для работы перехода требуется какое-то событие/состояние triggering, такое как :active, :checked, :hover и т. д. Представьте, что у вас есть 100 элементов с примененным эффектом перехода, без каких-либо trigger все они будут анимированы сразу после загрузки страницы. Вот почему вам нужно что-то для triggering анимации в определенном событии/состоянии. - person Rezigned; 07.10.2013
comment
Спасибо! Теперь это имеет смысл. Ваше здоровье - person Jacob Valenta; 07.10.2013
comment
Это лучший ответ, который я нашел во всем Google, и он заслуживает того, чтобы быть отмеченным как правильный. - person Balaji Viswanath; 14.08.2014
comment
@BalajiViswanath Рад, что это помогает :) - person Rezigned; 19.08.2014

arrow_upward
4
arrow_downward

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

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

person Andy    schedule 10.10.2012
comment
Спасибо. Он работает в Chrome, но кажется нестабильным и неустойчивым в Firefox. - person Paulaner; 10.10.2012
comment
@Paulaner У Энди есть правильный ответ, и я думаю об этом. Использование 1000 вместо 0 может быть лучше, так как вы хотите увидеть переход, 0 просто мигнет цветом и исчезнет. Кстати, я не вижу перехода здесь с FF15, вместо этого он сплошной желтый, еще не поддерживается? @Энди, я не считаю это hack. В этой конкретной ситуации это должно работать именно так, потому что jQuery немедленно выполнил removeClass после добавления, и поэтому переход должен быть невидимым. - person user1643156; 10.10.2012
comment
Спасибо вам, ребята. Rezigned только что опубликовал чистое решение, которое отлично работает для меня. - person Paulaner; 10.10.2012
comment
@user1643156 user1643156 да, переходы css работают, только если элемент виден. так что здесь это немного нелогично, потому что он даже сделал removeclass в дополнительной строке вместо того, чтобы привязать его к добавлению. - person Andy; 10.10.2012