初期値を与えてからトランジション

jp.ferv.blog » Blog Archive » iOS Safari Examples の補足その２

setTimeout を使わなかった場合

  • JavaScript
  • DefaultValueExample0.js
  • Source
function _onTouchStart(e)
{
	// 初期値を設定
	_box.style.webkitTransitionProperty = '';
	_box.style.webkitTransitionDuration = '';
	_box.style.backgroundColor = 'rgba(255, 0, 0, 1)';
	
	// トランジションを設定
	_box.style.webkitTransitionProperty = 'background-color';
	_box.style.webkitTransitionDuration = '1s';
	_box.style.backgroundColor = 'rgba(0, 0, 255, 1)';
}
  1. function _onTouchStart(e)
  2. {
  3.     // 初期値を設定
  4.     _box.style.webkitTransitionProperty = '';
  5.     _box.style.webkitTransitionDuration = '';
  6.     _box.style.backgroundColor = 'rgba(255, 0, 0, 1)';
  7.    
  8.     // トランジションを設定
  9.     _box.style.webkitTransitionProperty = 'background-color';
  10.     _box.style.webkitTransitionDuration = '1s';
  11.     _box.style.backgroundColor = 'rgba(0, 0, 255, 1)';
  12. }

青色のままで何も変化しません。

setTimeout を使った場合

初期値を与えてからトランジションに入る場合、

  • JavaScript
  • DefaultValueExample1.js
  • Source
function _onTouchStart(e)
{
	// 初期値を設定
	_box.style.webkitTransitionProperty = '';
	_box.style.webkitTransitionDuration = '';
	_box.style.backgroundColor = 'rgba(255, 0, 0, 1)';
	
	window.setTimeout(function () {
		// トランジションを設定
		_box.style.webkitTransitionProperty = 'background-color';
		_box.style.webkitTransitionDuration = '1s';
		_box.style.backgroundColor = 'rgba(0, 0, 255, 1)';
	}, 0);
}
  1. function _onTouchStart(e)
  2. {
  3.     // 初期値を設定
  4.     _box.style.webkitTransitionProperty = '';
  5.     _box.style.webkitTransitionDuration = '';
  6.     _box.style.backgroundColor = 'rgba(255, 0, 0, 1)';
  7.    
  8.     window.setTimeout(function () {
  9.         // トランジションを設定
  10.         _box.style.webkitTransitionProperty = 'background-color';
  11.         _box.style.webkitTransitionDuration = '1s';
  12.         _box.style.backgroundColor = 'rgba(0, 0, 255, 1)';
  13.     }, 0);
  14. }

setTimeout を使うと、初期値が反映された後トランジションが実行されます。

初期値とトランジションを同期的に実行してしまうと、プロパティに初期値を与えてすぐにトランジション用の値で上書きされてしまうので、非同期に（といっても wait は 0ms で大丈夫ぽい）実行しましょうということのようです。

ガイドではアニメーションを再実行する例が挙げられています。Safari CSS Visual Effects Guide: Animations » Listing 6 Restarting an animation

About this entry

You’re currently reading “初期値を与えてからトランジション,” an entry on jp.ferv.blog

Published:
Sat, Aug 14th, 2010 at 4:04 PM
Author:
dsk
Category:
Web
Tags:
, ,