CSS3 Transition to highlight new elements created in JQuery

Question

I want to use a CSS3 color transition to apply a highlight-fading color effect (yellow to transparent) to new elements appended to the markup using 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');
});

When I click the link, the new element is created. Its class is "new" (background color yellow) and it's appended to the HTML markup. I should be able to immediately remove the "new" class to trigger the background color transition to transparent (or whatever other color). I'm obviously doing it wrong, since the background color of the new element is immediately shown as transparent, with no transition effect. I know I can do this in JQuery UI, but I'd like to use CSS3 transitions.

jsfiddle here:

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

score 34 · Answer 1 · edited Mar 31 '18 at 11:42

I was able to get this to work with css3 animation:

@-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;
}

Just apply the highlight class to new elements:

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

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

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

});

I tested in IE 10, Chrome, Safari, and latest FF and it works there. Probably won't work in IE 9 and below...

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

I got this method from this book in Safari Books Online: http://my.safaribooksonline.com/9780132366847/ch05lev1sec2?link=f1184788-851e-4eb6-bb0b-61cb0fb7756d&cid=shareLink

This is much better and doesn't require fiddling on the javascript side. — Brendon Muir, Jun 10 '14 at 21:56

Rezigned · Answer 2 · 2012-10-10T08:40:12.677

23

Your code is almost perfect. You just have to trigger something in order to make the transition work. This can be done by adding 1 line of code to your 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/

edited Oct 10 '12 at 08:40

answered Oct 10 '12 at 08:21

Rezigned

4,523
1
17
17

Clean and simple. I knew that some kind of event triggering was needed to make the transition work. – Paulaner Oct 10 '12 at 08:58
After like 3 hours of trying, thanks for the help :) Any explanation as to why it has to be focused? – Jacob Valenta Oct 05 '13 at 16:49
2

@JacobValenta I can't find w3c spec about this anymore. Basically it needs some sort of `triggering` event/state such as `:active`, `:checked`, `:hover` etc to get the transition working. Imagine you have 100 elements with transition effect applied, without some sort of `trigger` all of them will be animated immediately after page load. That's why you need something to `triggering` the animation at a specific event/state. – Rezigned Oct 07 '13 at 02:11
Thanks! That makes sense now. Cheers – Jacob Valenta Oct 07 '13 at 06:50
This is the best answer I've found in whole of google and deserves to be marked as the correct – Balaji Viswanath Aug 14 '14 at 16:17
@BalajiViswanath Glad it helps :) – Rezigned Aug 19 '14 at 15:57

score 4 · Answer 3 · answered Oct 10 '12 at 08:11

4

It's an ugly hack, but it seems to work. I'm sure there's a better way.

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

answered Oct 10 '12 at 08:11

Andy

28,587
9
37
58

Thank you. It's working on Chrome but it seems to be unstable and erratic on Firefox. – Paulaner Oct 10 '12 at 08:22
@Paulaner Andy's got the right answer, and this is what I'm thinking about. Using 1000 instead of 0 might be better since you do want to see the transition, 0 will just blink the color and go away. BTW, I don't see the transition here with FF15, instead it's a solid yellow, not supported yet? @Andy, I don't consider that as a `hack`. In this particular situation, it should work this way because jQuery immediatelly executed removeClass after appending, and that's why the transition **should** not be seen. – user1643156 Oct 10 '12 at 08:43
Thank you guys. Rezigned just posted a clean solution that's perfectly working for me. – Paulaner Oct 10 '12 at 08:56
@user1643156 yes, css transitions only work if the element is visible. so it's a bit counter-intuitive here, because he even did the removeclass in an extra line, instead of chaining it to the append. – Andy Oct 10 '12 at 09:01

CSS3 Transition to highlight new elements created in JQuery

3 Answers3

Linked