transition-property-003-manual.html (1382B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Transitions Test: transition-property - none</title> 4 <link rel="author" title="Intel" href="http://www.intel.com"> 5 <link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> 6 <link rel="help" title="2.1. The 'transition-property' Property" href="http://www.w3.org/TR/css3-transitions/#transition-property-property"> 7 <meta name="assert" content="The 'transition-duration' property set 'none' means that no property will be transitioned."> 8 <style> 9 div { 10 height: 100px; 11 transition-timing-function: linear; 12 width: 100px; 13 } 14 #ref { 15 background-color: yellow; 16 transition-duration: 2s; 17 transition-property: width; 18 } 19 #test { 20 background-color: blue; 21 transition-property: none; 22 } 23 </style> 24 <body> 25 <p>Click the 'Start' button below. Test passes if the width of yellow square grows smoothly but the blue grows immediately.</p> 26 <div id="ref"></div> 27 <div id="test"></div> 28 <button>Start</button> 29 <script> 30 (function() { 31 var button = document.querySelector("button"), 32 test = document.querySelector("#test"), 33 ref = document.querySelector("#ref"); 34 button.addEventListener("click", function(evt) { 35 test.setAttribute("style", "width: 200px;"); 36 ref.setAttribute("style", "width: 200px;"); 37 }, false); 38 })(); 39 </script> 40 </body>