StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is actually pretty easy to do. All you have to do is change the css.</p> <p>Here's a fiddle with a very simple fade animation: <a href="http://jsfiddle.net/elthrasher/sNpjH/" rel="noreferrer">http://jsfiddle.net/elthrasher/sNpjH/</a></p> <p>To make it into a sliding animation, I first had to put my element in a box (that's the slide-container), then I added another element to replace the one that was leaving, just because I thought it would look nice. Take it out and the example will still work.</p> <p>I changed the animation css from 'fade' to 'slide' but please note that these are the names I gave it. I could have written slide animation css named 'fade' or anything else for that matter.</p> <p>The important part is what's in the css. Here's the original 'fade' css:</p> <pre><code>.fade-hide, .fade-show { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s; } .fade-hide { opacity:1; } .fade-hide.fade-hide-active { opacity:0; } .fade-show { opacity:0; } .fade-show.fade-show-active { opacity:1; } </code></pre> <p>This code changes the opacity of the element from 0 (completely transparent) to 1 (completely opaque) and back again. The solution is to leave opacity alone and instead change the top (or left, if you want to move left-right).</p> <pre><code>.slide-hide, .slide-show { -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s; } .slide-hide { position: relative; top: 0; } .slide-hide.slide-hide-active { position: absolute; top: -100px; } .slide-show { position: absolute; top: 100px; } .slide-show.slide-show-active { position: relative; top: 0px; } </code></pre> <p>I'm also changing from relative to absolute positioning so only one of the elements takes up space in the container at a time.</p> <p>Here's the finished product: <a href="http://jsfiddle.net/elthrasher/Uz2Dk/" rel="noreferrer">http://jsfiddle.net/elthrasher/Uz2Dk/</a>. Hope this helps!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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