このサンプルの動作確認済み環境。
| マシン | 環境 |
|---|---|
| iPhone | iPhone OS 3.1.2に付属のSafari |
| Mac | Safari 4.0.4 |
サンプルの主な部分。
<style type="text/css"> .sample { background-color: #000000; top: 5px; left: 5px; width: 70px; height: 70px; -webkit-transform: rotate(0deg); -webkit-transition: 1s linear; } .sample2 { -webkit-transform: rotate(360deg); } </style> <script type="text/javascript"> <!-- function test(event) { var element = event.currentTarget; element.className = (element.className == 'sample') ? 'sample sample2' : 'sample'; } // --> </script> </head> <body> <div onclick="test(event);" class="sample"> <img src="image.png" alt="*" title="" /> </div> </body> </html>
動作説明
動作としてはCSSで回転量 0度 から 360度 のアニメーションを実行させています。
動作対象で有るdivタグにはデフォルトでは sample というクラスが設定されており、ここに sample2 を加える事によりアニメーションをさせています。
.sample { (省略) -webkit-transform: rotate(0deg); -webkit-transition: 1s linear; }
.sample2 { -webkit-transform: rotate(360deg); }
クラスの追加はクリックされたときにJavaScriptでクラスを追加することで実行しています。
【1回目のクリック】
divタグにはクラス sample sample2 が指定される。
【2回目のクリック】
divタグにはクラス sample のみが指定される。
- webkit-transform: rotate(360deg); から -webkit-transform: rotate(0deg); に置き換わり。360度→0度の回転(最初と逆の向きの回転)が行われる。
<script type="text/javascript">
<!--
function test(event) {
var element = event.currentTarget;
element.className = (element.className == 'sample') ? 'sample sample2' : 'sample';
}
// -->
</script>サンプルはこちらで確認できます。
