CSS3 アニメーションで要素を表示・非表示
iOS用のWEBアプリ制作のためのメモ。
iOS専用でCSS3アニメーションが使用できるので、アニメーション部分をCSS3で作ってJavaScriptでトリガーを制御します。
HTML
.onが使いたいのでjQueryを読み込んでおく。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="inc/css/common_sc.css" /> <script type="text/javascript" src="inc/js/library/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="inc/js/common.js"></script> </head> <body class="body"> <div id="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div> <button>表示/非表示</button> </div> </body> </html>
CSS
表示、非表示のアニメーションをそれぞれ設定します。
非表示の場合はデフォルトの値をtransform: scale(0, 0);にしないとアニメーション後に再度元のサイズで表示されてしまいます。
.box{ display: none; margin: 20px; width: 100px; height: 100px; background-color: #ff0000; } .anime_in .box, .anime_out .box{ display: inline-block; } /** * webkit */ .anime_in .box{ -webkit-animation: anime_in 0.5s; } .anime_out .box{ -webkit-animation: anime_out 0.5s; -webkit-transform: scale(0, 0); } @-webkit-keyframes anime_in { 0% { -webkit-transform: scale(0, 0); } 50% { -webkit-transform: scale(1.3, 1.3); } 100%{ -webkit-transform: scale(1, 1); } } @-webkit-keyframes anime_out { 0% { -webkit-transform: scale(1, 1); } 50% { -webkit-transform: scale(1.3, 1.3); } 100%{ -webkit-transform: scale(0, 0); } }
JavaScript
とりあえず簡単にclassを付け替えるトリガーを設定。
classを付け替えるタイミングで、それぞれのclassに設定したCSS3アニメーションが発火します。
$(function(){ $(window).on('load',function(){ $('#container').addClass('anime_in'); }); $('button').on('click',function(){ $('#container').toggleClass('anime_out').toggleClass('anime_in'); }); });
