CSS3 Transition を Javascript から止める 8th713 Follow 2010-09-03 19:41:18 License: MIT License Fork0 Fav0 View1029 非同期にしないとダメらしい・・・ transition-duration: 0s のかわりにtransition-property: none; でもいける。 Firefox は試してないから分からない。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 60 lines HTML 9 lines CSS 25 lines 非同期にしないとダメらしい・・・ transition-duration: 0s のかわりにtransition-property: none; でもいける。 Firefox は試してないから分からない。 CSS3 Transition を Javascript から止める function reset(){ setTimeout(function(){ sample.style.cssText = ''; },3000); }; var buttons = document.querySelectorAll('button'); var sample = document.querySelector('#sample'); var funcs = { // 普通にアニメーション test1: function(){ sample.style.width = '200px'; reset(); }, // アニメーションしないと思いきやするパターン test2: function(){ sample.style.display = 'none'; sample.style.width = '200px'; sample.style.display = 'block'; reset(); }, // アニメーションしないと思いきやするパターン test3: function(){ sample.style.cssText = '-moz-transition-duration: 0s;\ -webkit-transition-duration: 0s;\ -o-transition-duration: 0s;\ width: 200px'; sample.style.cssText = 'width:200px;'; reset(); }, // アニメーションしないパターン // ただし Opera だとアニメーションしちゃう test4: function(){ sample.style.display = 'none'; sample.style.width = '200px'; setTimeout(function(){ sample.style.display = 'block'; reset(); },0); }, // アニメーションしないパターン // Opera でも大丈夫なパターン test5: function(){ sample.style.cssText = '-moz-transition-duration: 0s;\ -webkit-transition-duration: 0s;\ -o-transition-duration: 0s;'; setTimeout(function(){ sample.style.width = '200px'; reset(); },0); } }; [].forEach.call(buttons,function(e){ e.addEventListener('click',function(evt){ funcs[this.value](); },false); }); <div id="sample">sample</div> <ol> <li><button value="test1">TEST 1</button></li> <li><button value="test2">TEST 2</button></li> <li><button value="test3">TEST 3</button></li> <li><button value="test4">TEST 4</button></li> <li><button value="test5">TEST 5</button></li> </ol> CSS3 Transition を Javascript から止める body { margin:0; padding:0; background-color: #fff; } #sample { width: 100px; background-color: green; color: white; padding: 4px; margin: 16px; -webkit-transition-property: width; -moz-transition-property: width; -o-transition-property: width; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; } ol { margin: 16px; padding: 0px; } li { display: inline-block; } 非同期にしないとダメらしい・・・ transition-duration: 0s のかわりにtransition-property: none; でもいける。 Firefox は試してないから分からない。 function reset(){ setTimeout(function(){ sample.style.cssText = ''; },3000); }; var buttons = document.querySelectorAll('button'); var sample = document.querySelector('#sample'); var funcs = { // 普通にアニメーション test1: function(){ sample.style.width = '200px'; reset(); }, // アニメーションしないと思いきやするパターン test2: function(){ sample.style.display = 'none'; sample.style.width = '200px'; sample.style.display = 'block'; reset(); }, // アニメーションしないと思いきやするパターン test3: function(){ sample.style.cssText = '-moz-transition-duration: 0s;\ -webkit-transition-duration: 0s;\ -o-transition-duration: 0s;\ width: 200px'; sample.style.cssText = 'width:200px;'; reset(); }, // アニメーションしないパターン // ただし Opera だとアニメーションしちゃう test4: function(){ sample.style.display = 'none'; sample.style.width = '200px'; setTimeout(function(){ sample.style.display = 'block'; reset(); },0); }, // アニメーションしないパターン // Opera でも大丈夫なパターン test5: function(){ sample.style.cssText = '-moz-transition-duration: 0s;\ -webkit-transition-duration: 0s;\ -o-transition-duration: 0s;'; setTimeout(function(){ sample.style.width = '200px'; reset(); },0); } }; [].forEach.call(buttons,function(e){ e.addEventListener('click',function(evt){ funcs[this.value](); },false); }); <div id="sample">sample</div> <ol> <li><button value="test1">TEST 1</button></li> <li><button value="test2">TEST 2</button></li> <li><button value="test3">TEST 3</button></li> <li><button value="test4">TEST 4</button></li> <li><button value="test5">TEST 5</button></li> </ol> body { margin:0; padding:0; background-color: #fff; } #sample { width: 100px; background-color: green; color: white; padding: 4px; margin: 16px; -webkit-transition-property: width; -moz-transition-property: width; -o-transition-property: width; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; } ol { margin: 16px; padding: 0px; } li { display: inline-block; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/eeXI/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/8th713/eeXI" title="CSS3 Transition を Javascript から止める">CSS3 Transition を Javascript から止める - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Forked sort new page view favorite forked forked: CSS3 Transition を Java.. Kota.Yoshika.. 00 3views 61/9/25
