Skip to content

Instantly share code, notes, and snippets.

@oli
Created January 22, 2015 02:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oli/3db44ce24165f11e9113 to your computer and use it in GitHub Desktop.
Save oli/3db44ce24165f11e9113 to your computer and use it in GitHub Desktop.
Does anyone transition Flexbox order yet?
/* Does anyone transition Flexbox order yet?
http://dev.w3.org/csswg/css-flexbox/#order-property */
/* ✘ Chrome 28
✘ Safari 6.0.3
✘ Firefox 20
✓ Aurora 22
? IE 10
*/
.wrapper {
display: flex;
border: 2px solid #def;
transition: all 0.5s ease-out;
}
.box {
transition: all 0.5s ease-out;
width: 33%;
min-height: 4em;
padding: 0.75em 0;
text-align: center;
border: 2px solid #444;
background-color: #eee
}
.a {
order: 1;
background-color: #ddd;
}
.wrapper:hover .a {
order: 2;
}
.b {
order: 2;
background-color: #eee;
}
.wrapper:hover .b {
order: 3;
}
.c {
order: 3;
background-color: #fff;
}
.wrapper:hover .c {
order: 1;
}
<div class="wrapper">
<div class="box a">a</div>
<div class="box b">b</div>
<div class="box c">c</div>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment