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の２つの値しか無いが、 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
