読者です 読者をやめる 読者になる 読者になる

it's an endless world.

グロースをデザインするひと

CSS3アニメーションとjQueryのfadeOut/fadeInを組み合わせると危険

css3 javascript

今日ちょっとハマったので覚え書き。


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