flexbox_interactive_flex-transitions.html (1141B)
1 <!DOCTYPE html> 2 <title>flexbox | transitioned flex</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-property"> 5 <meta name="flags" content="interact"> 6 <style> 7 div { 8 width: 20em; 9 height: 8em; 10 11 display: flex; 12 } 13 span { 14 background: yellow; 15 width: 8em; 16 flex: 1 1 0%; 17 } 18 #test, .ref, p+div { 19 background: #3366cc; 20 } 21 div:hover #test { 22 transition: flex 4s; 23 flex: 0 1 100%; 24 } 25 p~div { 26 margin-right: 1em; 27 float: left; 28 display: block; 29 } 30 p~div span { 31 width: auto; 32 height: 8em; 33 float: left; 34 } 35 p~div~div span { 36 width: 5em; 37 } 38 </style> 39 40 <div> 41 <span>one</span> 42 <span>two</span> 43 <span>three</span> 44 <span id="test">four</span> 45 </div> 46 47 <p>Verify that the box above looks exactly like the second of the boxes 48 below. Then hover the box above and leave the mouse there for 1+ 49 seconds. The box above should <em>instantaneously</em> look exactly 50 like the first of the boxes below.</p> 51 52 <div> 53 <span>one</span> 54 <span>two</span> 55 <span>three</span> 56 four 57 </div> 58 59 <div> 60 <span>one</span> 61 <span>two</span> 62 <span>three</span> 63 <span id="test">four</span> 64 </div>