Databases
StackOverflow2013
Postsdbo
POCSS transition not working after element is appended
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS transition not working after element is appended
    primarykey
    data
    text
    <p>I have encountered an issue with CSS transitions and before I try something else, I want to understand what the problem is.</p> <p>There are 3 boxes in a container and a "next" button. The goal is for the next box top appear on top and to fade in when the "next" button is pressed. The box is positioned on top by appending it to the container, so that it is added as the last element and thus visible on top, and should fade in through css transition.</p> <p>The problem is that the css transition does not seem to work after the box was appended. The css transition works well if tested on a box element that is not appended.</p> <p><a href="http://jsfiddle.net/z435s/13/" rel="nofollow">Fiddle here</a>, code below:</p> <p>HTML:</p> <pre><code>&lt;div class="container"&gt; &lt;div class="box red"&gt;&lt;/div&gt; &lt;div class="box blue"&gt;&lt;/div&gt; &lt;div class="box green"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="next"&gt;Next&lt;/div&gt; </code></pre> <p>JS:</p> <pre><code>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 &lt; 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); </code></pre> <p><strong>Update</strong>:</p> <p>A basic solution to this problem was to call offset() on the target after setting the opacity to 0 and before setting the transition css:</p> <pre><code>target.css("opacity", 0); target.offset(); target.css("transition", "opacity 1000ms ease-out").css("opacity", 1); </code></pre> <p><a href="http://jsfiddle.net/z435s/14/" rel="nofollow"><strong>Updated</strong> version of the above fiddle here</a></p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USjsgroove
    1. USjsgroove
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POCSS transition not working after element is appended
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POCSS transition not working after element is appended
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload