マウスアウト時のアニメーションの挙動がうまくいかないときの解決方法

こんにちは。

今日は以前にコーディングの際に少しばかり詰まってしまったときの備忘録としてその解決方法を載せておこうと思います。

まずマウスアウトって表現が正しいのかそもそもなところなんですけど、

ホバー終了時、要素からカーソルが離れたときのアニメーションの挙動がうまくいかなかったことが以前にあって意外と解決に時間がかかってしまったのですが、今回はその解決方法を紹介します。

コーディング経験のある方は、ホバーって聞くとまず最初に想像するのはおそらく

  • 透明度の調整(opacity)
  • 要素の拡大、もしくは縮小(scale)
  • 色の変更(color or background-colorなど)

この辺りだと思うのですが、ん?このあたりは別に問題なくない?

はい、その通り。上記のようなシンプルなホバーアニメーションであれば、全く問題ありません。

.hoge{
  transition-duration: 0.5s;
  color: black;
}
.hoge:hover{
  opacity: 1;
  transform: scale(1.2);
  color: #fff;
}

こんな感じで十分ですよね。

でもね、このノリでいけば動きそうって思っても動かなくなる時があるんですよ。

それは主に複数の動作が必要な時、ホバー中は永続的にアニメーションさせたい時

= animationプロパティを使用してる時!

例えばこんな時


.hoge .hoga{
  transform: scale(0);
}
.hoge:hover .hoga{
    animation: huwahuwa 1s 0.5s ease-in-out infinite alternate, zoom 0.5s ; 
}
@keyframes zoom {
  0% { transform:scale(0); }
100% { transform:scale(1); }
}
@keyframes huwahuwa {
  0% { transform:translateY( 0px) scale(1); }
100% { transform:translateY(  -0.5rem) scale(1); }
}

重要なCSS以外は省略してます。

これがどういう動きをするかというと(ホバー終了時の動きに注目してください。)

急にアニメーション終わっちゃいますよね。

ホバーアウト時にもアニメーションしてくれると思うかもしれないんですが、そうは問屋が許してくれません。

なんとなくtransitionの名残でanimation-durationでもつけとけばいいんじゃね?

はい、僕も昔はそう思ってました。

transitionとanimationは似ても似つかないものと覚えておきましょう。

NARUTOで言うと写輪眼と万華鏡写輪眼くらい違います。

じゃあどう解決すればいいでしょうか。

当時いろいろ考えました。

まさか万華鏡写輪眼の開眼条件が最も親しい者を失うほどの精神状態に達した時だなんて気付きませんよね。経験者にでも聞かない限りは。

ここで最も親しいはずだった:hoverは削除します。もう使いません。

代わりにjqueryを使います。

これを追加。

jquery


$('.hoge').mouseover(function() {
  $(this).removeClass("zoomOut");
  $(this).addClass("zoom");
})
$('.hoge').mouseout(function() {
  $(this).removeClass("zoom");
  $(this).addClass("zoomOut");
})

CSS

.hoge{
  width: 50px;
  height: 50px;
  position: relative;
  background-color: cornflowerblue;
  margin-left: 30px;
}
.hoga{
  transform: scale(0);
  width: 50px;
  height: 50px;
  background: black;
  position: absolute;
  top: 0px;
  left: 100px;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}



.hoge.zoom .hoga{
  animation: huwahuwa 1s 0.5s ease-in-out infinite alternate, zoom 0.5s ; 
}
.hoge.zoomOut .hoga{
  animation: zoomout 0.5s ; 
}

@keyframes zoom {
  0% { transform:scale(0); }
100% { transform:scale(1); }
}
@keyframes huwahuwa {
  0% { transform:translateY( 0px) scale(1); }
100% { transform:translateY(  -0.5rem) scale(1); }
}

@keyframes zoomout {
  0% { transform:scale(1); }
100% { transform:scale(0); }
}

するとこうなるはずです。

こんにちは

マウスアウト時もしっかり動いてくれましたね!

流れとしては

1. jqueryでマウスオン、マウスアウト時に クラスを付与してあげる。これがホバーの役割になってます。

$('.hoge').mouseover(function() {
  $(this).removeClass("zoomOut");
  $(this).addClass("zoom");
})
$('.hoge').mouseout(function() {
  $(this).removeClass("zoom");
  $(this).addClass("zoomOut");
})

2.ホバーアウト時のアニメーションも定義してあげる。

今回の場合はこちら

@keyframes zoomout {
  0% { transform:scale(1); }
100% { transform:scale(0); }
}

大体は逆のアニメーションを作成してあげれば解決しますね。

この方法を覚えておけば、ホバーのアニメーションでつまづいた時はjqueryを駆使して解決することができるので、覚えておいて損はないかと思います。

今回のポイント

  • ホバーイベントは、jqueryで代用できる。(mouseover&mouseout)
  • 通常のホバーアウト時のアニメーションはtransitionと同様の動きにはならない。

それではまた。

Jun

Jun

フロントエンドエンジニア。 web=lifeではサイト制作全般、ECサイトの構築に携わっています。 shopfyでのEC構築サービス開始に伴い日々悪戦苦闘中です。 好きな食べ物はどら焼き。

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


TOP