CSS3アニメーションとjQueryのfadeOut/fadeInを組み合わせると危険
今日ちょっとハマったので覚え書き。
CSS3でアニメーションをしている箇所を、同時に別のボタンでフェイドイン/フェイドアウトさせたかったので、いつもみたいに
$('#hoge').toggle( function(){ $('#wrap').fadeOut('slow'); }, function(){ $('#wrap').fadeIn('slow'); } );
って書いてたら、フェイドインしたときにCSS3で設定したアニメーションが無駄に動き始めた。
ただフェイドインして欲しかっただけなのに。
よくよく考えたらjQueryのfadeOutってcssのdisplayをnoneにしちゃうから、fadeInするときにもう一度cssが適用されなおして、アニメーションが動いちゃうと。
しょうがないので、フェイドイン/フェイドアウトもCSS3で実装。
$('#fuga').toggle( function(){ $('#wrap').removeClass('btnFIn').addClass('btnFOut'); }, function(){ $('#wrap').removeClass('btnFOut').addClass('btnFIn'); } );
.btnFOut{ -webkit-animation-name:'FOut'; -webkit-animation-duration:.3s; -webkit-animation-timing-function:ease-in; -webkit-animation-iteration-count:1; visibility: hidden; } @-webkit-keyframes 'FOut' { 0%{opacity:1;visibility: visible;} 100%{opacity:0;visibility: hidden;} } .btnFIn{ -webkit-animation-name:'FIn'; -webkit-animation-duration:.3s; -webkit-animation-timing-function:ease-in; -webkit-animation-iteration-count:1; } @-webkit-keyframes 'FIn' { 0%{opacity:0;visibility: hidden;} 100%{opacity:1;visibility: visible;} }
jQueryのアニメーションは重いし、解決ついでに結果的により良くなりました、と。
たぶん。
実際に動いて確かめられるサンプルはこちら
CSS3アニメーションとjQueryのfadeOut/fadeInを組み合わせると危険 - jsdo.it - Share JavaScript, HTML5 and CSS