cssアニメーションで JQueryのfadeIn fadeOutを実装する
最近、脱jQueryの流れがあるので、大好きではあるが今やっている案件は、jQueryを使わないで実装することにした。
そこで以外にめんどくさいのがfadeIn fadeOut。
jQueryでは、
opacity:1 → opacity:0 → display:none
display:block → opacity:0→ opacity:1
のようにやっているが
これを素のJSでやると結構めんど臭い。
どうしてもCSS + classをつけたり消したりで、実装したかったのだが
そもそも「display」 プロパティが css transitionや animationに対応したプロパティではないので
色々試したがうまくいかなかった。
そこで見つけたのが、「visibility」プロパティ。 普段、「display」プロパティの影に隠れて使うことがほぼなかったんだけど、 このプロパティは、 hiddenとvisibleの2つの値しか無いが、 transitionやanimationに対応していて
timing functionの値が(tf = 0) => hidden;
timing functionの値が(0 < tf <= 1) => vislble;
となる仕様なので、(以下参照)
https://www.w3.org/TR/css-transitions-1/#animtype-visibility
.hoge{ opacity:0; visibility:hidden; transition: opacity 0.3s , visibility 0.3s; &.is-show { opacity: 1; visibility: visible; }
こんな感じで実装ができました。 そういえば、tweenMaxのautoAlphaもvisibilityを使っていたなー。。
かなり便利。ありがとうvisibility