jQueryのfadeIn、fadeOutのアニメーションがちらつく

jQueryでfadeIn、fadeOutのアニメーションをしたときに、ちらつく現象について。

アニメーションはイージングの設定によって見た目が代わりますが、一番基本のlinearでもちらつきます。
「ちらつく」というのがどういう現象かというと、本来は透明から不透明に少しずつ現れていってほしいのですが、透明状態から一瞬濃い状態になり、また薄い半透明になり、それからアニメーションがスタートする感じ。

言ってみれば、フェードインがスタートする前に、ちょっと見えちゃうんですよね、一瞬。
この一瞬見えちゃうってのがすごくカッコ悪い。
っていうか、もうチカチカして、一目見て不具合!って感じ。

で、原因はというと、CSSのtransition設定とぶつかっていたのでした。
transition設定をしている要素に対してfadeIn、fadeOutをすると発生する現象のようです。

いやー、ちょっとハマったわ。

なので、transitionをやめるか、どうしても必要なら、fadeIn・fadeOutのアニメーションが終わった後にjQueryでセットするということになるでしょう。

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Adobe Photoshop CS6の自動保存機能のファイル保存場所