スマホでのhoverを考える。

〽️出場選手紹介。〽️実戦。〽️hover解除を考えるとその先に。〽️結果発表〜。

CSSアニメーション、作り方。

2020.04.17
webアニメーションを１から学ぼう♪

⬆︎CSSアニメーションについてのまとめページはこちら。

こんにちは、「ふ」です。
前回・前々回の記事では、CSSのtransitionについて紹介してきました。

では実際の作業でtransitionを実装するとき。プロパティ変更のきっかけとして、「:hover」などの擬似クラスを利用することも多いかと思います。
「:hover」とはPCなどのマウスカーソルデバイスにおいて、要素の上にカーソルが乗っている状態を指します。「クリック」ではありません。

ところがスマホなどのタッチデバイスにおいては、画面上にカーソルはありません。PCだと「カーソルを合わせる → クリックする」の順に２つのアクションがあるのですが、スマホだと「要素の上に指を合わせてタップする」という１つのアクションしかありません。つまり、

「hover = click」

の状態です。

スマホでも「:hover」のような条件を付けて、transition効果を施したい。もちろんPCとスマホ・タブレットは操作形式の異なるデバイスです。完全に再現することはできませんが、「:hover ← アニメーション」に近いことはできないだろうか？今回、調べていきたいと思います。

出場選手紹介。

hover

active

onclick

ontouchstart

調査にあたり、「:hover」に似た効果を実装した４種類の有望な選手（要素）を用意し、試してみることにします。

　１、hover（擬似クラス）

hover

#sample:hover { bb「「３/* 処理 */」」 }

本家である「:hover」です。PC環境ではカーソルが要素の上に重なっているかどうかを判断し、「true」であれば指定されたプロパティの値を変更します。
タッチデバイスで実装した場合、ちゃんと機能するのでしょうか？

　２、active（擬似クラス）

active

#sample:active { bb「「３/* 処理 */」」 }

hoverに似た擬似要素として「:active」があります。
PC環境では、「クリックしている間だけプロパティ値が変更される」というものです。

　３、hover + onclick属性

onclick

#sample:hover { bb「「３/* 処理 */」」 }

この選手はhoverやactiveなどの擬似クラスではなく、クリックしたときにJavaScriptで定義した関数を呼び出すための属性です。
といっても実際にJavaScriptを記述するわけではありません。通常の使い方としては「""」の中に呼び出したい関数を記述するのですが、今回は何も記述しません。「空指定」にします。

例えば、この記事の本文のところをマウスでクリックしても何も起きないですよね。というか、そもそもクリック自体できません。

要素にこの属性を指定すると、そこが「クリックできる場所」として扱うことができます。あくまでhoverはhoverで処理を記述しておいて、なおかつ「押せる要素」にしておき、「clickしたので当然hoverしてるよね」とブラウザに認識させる作戦です。

　４、hover + ontouchstart属性

ontouchstart

#sample:hover { bb「「３/* 処理 */」」 }

onclick属性と同じく関数呼び出しのための属性ですが、技術サイトでhoverの代用として最も推奨されています。
その名の通り、「ユーザのタッチイベントが始まった」ことを検知して、なんらかの関数を呼び出します。まさしくタッチデバイス用の属性です。

これについても呼び出し関数は「""」とし、何も記述しません。「タッチがされた」ことをブラウザが検知できるようにするためだけに指定します。
これをhover処理と併用することで、「タッチされた=hoverされた」と認識させるのが狙いです。

実戦。

ボタンの基本CSSはこちら⬇︎。class名を「area」としています。
１番下、transitionを1sとしています。

.area { font-weight:bold; font-size:120%; padding:0.5em 1em; border:solid 2px; border-radius:5px; width:40%; margin:0 auto; text-align:center; color:cornflowerblue; background-color:#ddd; display:block; 「「１transition:1s;」」 }

ここにアクションが起きると、色を反転させることにしました。

以下、それぞれの選手に実際にコードを仕込んで、タッチデバイスで表示してみた結果です。iPhoneのSafariおよびAndroidのChromeで試しました。

　１、hover。

hover

先づは本家のhoverで試します。

<div id = "「「５hoverarea」」" class = "area">hover</button>

「「５#hoverarea」」:「「１hover」」　{ background-color:cornflowerblue; color:#ddd; }

■ 結果(Chrome) androidのChromeでは..できました。
タッチするとちゃんとtransitionしてくれます。

■ 結果(Safari) iOSのSafari。反応せず💧

　２、active。

active

次はactiveです。
PCでは「クリックしている間だけCSSが変わる」というもので、タッチデバイス上ではもっともhoverに近い挙動をしてくれそうです。

「「５#activearea」」「「１:active」」 { background-color:cornflowerblue; color:#ddd; }

■ 結果（Chrome） androidデバイスのChromeでは、ちゃんとタップしている間だけtransitionしました。

■ 結果（Safari）しかし、iOSのSafariにおいては、アニメーション完走までタッチし続けると「長押し」と判断され、サブメニューが表示されてしまいます。これはちょっと苦しい。

　３、hover + onclick。

onclick

onclick属性はどうでしょうか。前述のとおり、要素の開始タグにonclick属性を指定、参照先はクオテーションで空白にしておきます。

<button id = "「「５onclickarea」」" class = "area" 「「１onclick = ""」」 >active</button>

「「５onclickarea」」「「１:hover」」 { background-color:cornflowerblue; color:#ddd; }

■ 結果(Chrome、Safari)

これについてはSafari、Chrome共に実装可能でした。
要素をタップすると、ちゃんとtransitionします。

　４、hover + ontouchstart。

ontouchstart

hover関連の技術ページでもっともよく推奨されていたのがこのontouchstart属性。
onclickの時と同様、要素開始タグに"参照先なし"で指定します。

<button id = "「「５ontoucharea」」" class = "area" 「「１ontouchstart = ""」」 >active</button>

「「５#ontoucharea「「１:hover」」」」 { background-color:cornflowerblue; color:#ddd; }

■ 結果(Chrome、Safari)

これについてもonclickの時と同じ挙動でした。
両ブラウザともに、フツーにタップに反応。

評判通り、hoverしたい要素には「hover+ontouchstart」の組み合わせを指定するのが良さそうですね。
「hover+onclick」でも可ですが、タッチデバイス用の属性を使うのが無難、としました。

hover解除を考えるとその先に。

実戦結果をもとにタッチデバイスでのhoverは、「hover+ontouchstart」でいくこととします。
扨（さて）PCなどのポインティングデバイスにおいては、カーソルが対象からはなれるとhoverは解除されます。

タッチデバイスではどのようなアクションをもってhover解除となるのでしょうか？