Geek Answers Handbook

CSS transition does not work after adding element

I ran into a CSS transition problem, and before trying anything else, I want to understand what the problem is.

The container has 3 boxes and a "Next" button. The goal is for the next top of the window to appear on top and disappear when the "Next" button is clicked. The box is positioned at the top, adding it to the container, so that it is added as the last element and, thus, is displayed at the top, and should disappear through the css transition.

The problem is that the css transition does not work after adding the field. The css transition works well if checked for a box item that is not added.

The script is here , the code is below:

HTML:

<div class="container"> <div class="box red"></div> <div class="box blue"></div> <div class="box green"></div> </div> <div id="next">Next</div>

JS:

 var container = $(".container"); // Save the current list order var list = container.children(".box"); // The current index var current = 0; // Put the first on top container.append(list[0]); function next() { // Figure out what is the index of the next box if (current + 1 < list.length) current++; else current = 0; // Save it in a variable var target = $(list[current]); // Put it on top container.append(target); // Hide it and then fade it in target.css("opacity", 0).css("transition", "opacity 1000ms ease-out").css("opacity", 1); // The fading in is not working } $("#next").click(next);

Update

The main solution to this problem was to call offset () on the target after setting the opacity to 0 and before setting the css transition:

 target.css("opacity", 0); target.offset(); target.css("transition", "opacity 1000ms ease-out").css("opacity", 1);

Updated version of the above scripts

+4
source share
2 answers

The variable "list" is a jQuery object, but the elements you pull out of it as a "target" are not jQuery objects - these are DOM nodes. Thus, your calls to ".css ()" do not work (which is reported in the error console for me).

Once you fix this, the next problem is how the browser uses the CSS update sequence. I don’t understand what exactly I see (from Firefox 18 on Linux), but I think that the main problem is that since the layout is not reformatted between the changes, the net effect is that the styles have “collapsed”, so no changes to the network.

In this update for violin I took a different approach. I put the transition rules in the box class, and then added the prefade class:

 .prefade { transition-duration: 0; opacity: 0; }

Then, instead of messing with the style of the element, I add "prefade" before adding, and then start updating the layout, asking for the offset of the element. Then I can remove the "prefade" class and the window disappears.

 target.addClass('prefade'); // Put it on top container.append(target); var p = target.offset(); target.removeClass('prefade');

I don’t know if this is the “right” way to do something. edit - for it to work in Chrome, the transition properties must be repeated with the -webkit- prefix.

+2
source

Is there any specific reason to use CSS transitions when you can use jQuery fades instead and work with your code in browsers that don't support CSS transitions?

 var $container = $(".container"); function next() { var $next = $container.children().first(); $next.hide().appendTo($container).fadeIn(); } $("#next").click(next);

Note that you can avoid the large amount of state that you maintain by simply taking the first element from the container and moving it back - the DOM maintains your state for you!

See http://jsfiddle.net/alnitak/w6y3B/

+1
source

More articles:


All Articles