CSS3 Transition を Javascript から止める

8th713

2010-09-03 19:41:18

License: MIT License

Fork: 0

Fav: 0

View: 1207

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 から止める

[].forEach.call(buttons,function(e){
  e.addEventListener('click',function(evt){
    funcs[this.value]();
  },false);
});

CSS3 Transition を Javascript から止める

非同期にしないとダメらしい・・・ 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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<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>

QR Code