eureka techblog

【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】

2017.12.13

Tech

by Kentaro Yamauchi

Advent_Calendar (78)

css (2)

エウレカのPairsグローバル事業部エンジニアの山内です。
この記事は、eureka Advent Calendar 2017 13日目の記事です。

昨日は新卒エンジニア鈴木康文さんの「Goのフレームワーク“Revel”を触ってみた」でした。
これからGoをはじめてみようという方にはとても入っていきやすい内容です。是非。

# 前置き

最近、HTML要素をフェードイン/フェードアウトする実装をしました。

たかがフェードインアウト、と侮るなかれ。
「CSSだけで表現」「JavaScriptは極力関与しない」「とにかく簡潔に」と決めて取り掛かるといくほどか難易度がアップします（しました）。

実装を終え、なるほどなぁと思うところがあったのでそのことを書くことにしました。
よろしければお付き合いください。

# 達成条件

以下を満たす、フェードイン/フェードアウトを実装します。

アニメーションをスタートするタイミングはJavaScriptで制御

アニメーションへの関与は `.is-show` の付け外しのみ

アニメーション自体はCSSだけで表現

ふわっと表示されて「ふわっと消える」

フェードアウトした要素はクリックとかできないようになっている

`opacity:0` で透明にするだけではダメ

結果だけ知りたい方はこちら

# コラム：CSSアニメーションを理解するための2つのポイント

本筋から逸れますが、CSSアニメーションを理解する上で必要なことをまとめています。
不要な方はこの節を飛ばして # Try & Error へ。

CSSでいろいろできるんだろうけど、いまいち実装のイメージが湧かない

調べてみると、 `transform` とか `transition` とかややこしい

そんな方はいらっしゃいますでしょうか。
だいじょうぶです。以下、2つのポイントだけ抑えれば、CSSアニメーションは誰でもカンタンに作れます。

① アニメーション定義の手段 – animationとtransition

アニメーションさせるためのプロパティは2つしかありません。
`animation` と `transition` です。
役割が異なるので、ユースケースを抑えることが理解の1歩目となります。

animation

`@keyframe` で fromからtoにかけてスタイルの状態変化 `my-fade-in` を定義し、それを.boxのアニメーションとして指定しています。

animationで抑えたいポイントは
スタイルの状態変化がfrom〜toへ一方通行であり、逆へ変化はできないという点です。

例えばフェードアウトさせるためには、逆の状態変化をkeyframeとして定義する必要があります。

transition

「.boxのスタイルのうち、 opacity については状態の変化をアニメーションする」という指定をしています。

.boxに `.is-show` が付与されると `opacity: 1` の状態になろうとしてその経過がアニメーションとして描画されます。

※ サンプルでは `.is-show` の付け外しをJavaScriptで行っています。

transitionで抑えたいポイントは
スタイルの状態変化は双方向であり、行ったり来たりの変化が可能という点です。

つまり、もとに戻るアニメーションもできるということです。

まとめると

animation

スタイルが1度変化したら、もとに戻らなくてよいクリエイティブ向き

ランディングページでよくある、スクロールごとのフレームイン動作、など

transition

スタイルが往復の変化をしなければならないクリエイティブ向き

トグルボタン、ドロワーメニュー、など

② アニメーショントリガー

アニメーションの定義手段はわかりました。
次に、そのアニメーションをスタートさせるトリガーについて考えます。

アニメーションが始まるトリガー・アニメーションを始めるトリガーは
大きく分けて3パターンです。

初回描画によるトリガー

ブラウザがHTML・CSSを読み込むと、定義されたスタイルの状態に変化する経過をアニメーションします。

JavaScriptを介したクラス操作によるトリガー

transitionサンプルのような、JavaScriptで `.is-show` 等を付け外しすることでスタイルの状態を変化させます。

擬似クラスによるトリガー

`:checked` `:hover` など、HTML・CSS仕様としての擬似クラスをアニメーショントリガーとして利用することもできます。

transitionサンプルと同じものを、JavaScriptなしで実現すると ↓こうなります。

inputの `:checked` を利用しています。
`:checked` になった時の隣接要素.boxの状態を定義しておけば、チェックボックスON/OFFに合わせて、opacityの状態変化をアニメーションしてくれるという仕組みです。

さらに、
`＜label for="xxx"＞` と、非表示にした `＜input type="checkbox" id="xxx"＞` 等を組み合わせることでクリエイティブの自由度も跳ね上がります。
（CSSオンリーのおしゃれなフォーム系ライブラリなどは、この仕組みで動いていることが多いです）

以上を抑えておけば、CSSでのアニメーションは思いのままです。
他サイトで気になったおしゃれなアニメーションの仕組みなども調べやすくなると思います。

# Try & Error

ここから本筋に戻り、考えたこと・試したことを並べていきます。

試行1: animationプロパティによるアニメーション

フェードイン用クラス、フェードアウト用クラスを定義

JavaScriptで2つのクラスを入れ替える方針

無理やり感があってださい

却下

試行2: transitionプロパティによるアニメーション

状態が表示←→非表示を行ったり来たりするわけだから、transitionが最適

フェードの状態変化はopacityで行う

クリックできてしまう

`opacity: 0` だけだと要素は残ったまま。

却下

試行3: displayプロパティを追加

要素が残っていることが原因なので、display:noneで消してしまえばいい

フェードアニメーションをしなくなった

transitionの切り替えよりもdisplayのONOFFが強く効いているみたい

却下

試行4: visibilityプロパティにしてみる

クリックOK

フェードインOK

しかし、フェードアウトは「ふわっと消えない」

おしいけど却下。あと少し

# 最終的に

こうなりました。

特筆すべきは、
数値の変化ではないにも関わらず visibilityプロパティがtransitionのプロパティとして適用できる点でしょうか。

（参考）
https://qiita.com/bukurocci/items/08b972e60a3b8357fc50

参考先にあるように、
timing-functionの計算中（=状態変化中）は `visibility:visible` 扱いとなるため、
.boxは画面上に描画されている状態となります。

そこに2つ目のtransitionとして `opacity` を指定することで
`0 → 1` の状態変化がおこる = フェードイン・アウトのアニメーションが描画される
という仕組みです。

# 所感

最後にご紹介したCSSは、今後のフェードイン・フォードアウト実装では積極的に使っていこうと思っています。
最強なので。
visibilityについての知見はとても有意義でした。

今回の記事が、CSSを少しでも楽しむお役に立てばと思います。
みんなでCSSアニメーションいっぱいつくろう。

明日は、「この人を差し置いてPairsを語るなかれ。サーバサイド担当小島さん」の登場です。乞うご期待。

エウレカでは、一緒に働いていただける方を絶賛募集中です。募集中の職種はこちらからご確認ください！皆様のエントリーをお待ちしております！