簡単なサンプルを作成。
まずはHTML。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>TEST</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script> <script src="zoom.js" charset="utf-8"></script> </head> <body> <button type="button" id="btn">btn</button><br> <div class="container"> <div class="box"> <div class="inner"></div> </div> </div> </body> </html>
つづいてCSS。ボックスが中心に表示されるように設定。
button { font-size: 16px; } .container { position: relative; vertical-align: top; position: relative; width: 480px; height: 480px; border: 1px solid #ddd; } .box { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; background: #99b1ee; -webkit-transform: translate(-50%, -50%); -moz-transform : translate(-50%, -50%); -ms-transform : translate(-50%, -50%); transform : translate(-50%, -50%); -webkit-transition: all 1s ease 0s; transition : all 1s ease 0s; } .box.active { width: 300px; height: 300px; }
最後にJS。
$(function() { var transitionEndEvents = [ 'webkitTransitionEnd', 'mozTransitionEnd', 'oTransitionEnd', 'transitionend' ]; var animEnd = transitionEndEvents.join(' ') $('.box').on(animEnd, function() { alert('done!'); }); $('#btn').on('click', function() { var $el = $('.box'); if ($el.hasClass('active')) { $el.removeClass('active'); return false; } $el.addClass('active'); }); });
CSSの.activeで、widthとheightを変更しているので、完了後のアラートは2回表示さる。