クリックをトリガーにしたアニメーション - CSS JavaScriptを用いたクリックで開始するアニメーション - JavaScript
クリックをトリガーにしたアニメーションのJavaScript,CSSのコードを紹介します。
概要
CSSでアニメーションするには、CSSの定義で "transition" プロパティを指定します。"transition" プロパティを指定すると、スタイルの変更が発生した際に、"transition" プロパティで設定したプロパティを指定した時間でアニメーションする動作になります。
プログラム例
コード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="DivAnimationJS.css" />
<script type~="text/javascript">
function FrameClick() {
target = document.getElementById("Frame01");
if (target.className == null || target.className=="") {
target.className = "FrameExpand";
} else {
target.className = "";
}
}
</script>
</head>
<body>
<div>枠の上です。</div>
<div id="Frame01" class="" onclick="FrameClick();">ABCDEFG</div>
<div>枠の下です。</div>
</body>
</html>
#Frame01 {
width:200px;
height:32px;
border:1px solid #0026ff;
transition: height 0.2s ease-in;
}
#Frame01.FrameExpand {
width:200px;
height:96px;
border:1px solid #0026ff;
}
解説
スタイルシート部分
"#Frame01"が標準の状態のスタイル、"#Frame01.FrameExpand"がクリックされ広がった状態のスタイルを記述しています。標準状態のスタイルに"transition"を設定することで標準状態から広がった状態に変わるときにアニメーションします。
#Frame01 {
width:200px;
height:32px;
border:1px solid #0026ff;
transition: height 0.2s ease-in;
}
#Frame01.FrameExpand {
width:200px;
height:96px;
border:1px solid #0026ff;
}
JavaScript部
id="Frame01"のDiv枠がクリックされた際に実行されるJavaScriptです。getElementById() メソッドを呼び出しIDがFrame01の要素を取得します。取得た要素のclassNameがnullまたは""出会った場合は標準状態であるため、classNameに"FrameExpand"を設定し枠を広げます。classNameが"FrameExpand"に設定されている場合はclassNameを""に変更し元の状態に変えます。
function FrameClick() {
target = document.getElementById("Frame01");
if (target.className == null || target.className=="") {
target.className = "FrameExpand";
} else {
target.className = "";
}
}
div
アニメーションで伸縮するdiv枠です。枠がクリックされた際にJavaScriptを実行させるため、onclick属性に呼び出すJavaScriptの関数を記述します。
<div id="Frame01" class="" onclick="FrameClick();">ABCDEFG</div>
実行結果
HTMLファイルを表示します。下図の画面が表示されます。
青枠の内部をクリックすると、アニメーションにより枠の高さが広がります。
もう一度枠の内部をクリックするとアニメーションにより枠の高さが元の高さに戻ります。
補足(注意)
下記のコードではアニメーションが意図した動作になりません。サイズの変更は正しく動作します。
それぞれのクラス名の状態を定義するのではなく、クラスがない状態とクラスが指定された状態のスタイルを定義して切り替えるとアニメーションが意図した動作になります。
#Frame01.FrameCollapse {
width:200px;
height:32px;
border:1px solid #0026ff;
transition: height 0.2s ease-in;
}
#Frame01.FrameExpand {
width:200px;
height:96px;
border:1px solid #0026ff;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="DivAnimationJS.css" />
<script type~="text/javascript">
function FrameClick() {
target = document.getElementById("Frame01");
if (target.className == "FrameCollapse") {
target.className = "FrameExpand";
} else {
target.className = "FrameCollapse";
}
}
</script>
</head>
<body>
<div>枠の上です。</div>
<div id="Frame01" class="FrameCollapse" onclick="FrameClick();">ABCDEFG</div>
<div>枠の下です。</div>
</body>
</html>
このページのキーワード
- クリックをトリガーにしたアニメーション - CSS JSを用いたクリックで開始するアニメーション
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
