ホバーアニメーションを1から書けるようになりたい①左→右(transition)

ホバーアニメーション、いろいろパターンがあるけれどコピペでも動かなそうでほとんど使ったことないけどアニメーション範囲狭いし理解できたらいい感じになるんでは?ってことで自分的解釈をしてみる

ホバーで左→右に色がつくやつ

その1:親と子でabsolute

Just a moment...

↑をちょっといじったやつ↓

範囲狭いし理解できたらいい感じになるんでは?ってことで自分的解釈をしてみる

が通常状態で表示されてる領域で、にホバー時のピンク要素があって、スライド動作は子を親範囲外→親範囲内(absolute)って動きでスライドさせている

通常時(黄緑)

.outerで指定されているとこが黄緑の、通常状態で表示されてる部分。
position:relativeにして.innerの基準にしている。
.innerが範囲外にでてしまうのでoverflow:hiddenしてる

ホバー動作終了時(ピンク)

.innerで指定されているところがピンクの、ホバー時に表示される部分。
こいつ中身がないのでheight指定しないといけない……
position:absoluteのleft:-150px(←幅分)でずらしている。ピンク箱と黄緑箱が並んでる状態だけど.outerのhiddenによってホバー前は見えない

ホバー

:hoverでleft:0でホバーするとピンクが現れる
これ.inner:hoverじゃあかんのか?って一瞬思ったけど、そうだった、.innerは領域外にいるんだった

文字

aの文字が消えないようにz-index指定しているっぽい

ホバー時アニメーション

.outerのtransition:all .5s ease;ってとこですな!ピンクのとこが動いてるから.outerに指定しているって認識でいいんだろうか……

<div class="outer">
  <div class="inner"></div>
  <a href="#"> Hover </a>
</div>
.outer{
  width:150px;
  height:50px;
  text-align:center;
  display:inline-block;
  background: #c4d700;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
}
.outer a{
  color:#fff;
  line-height:50px;
  text-decoration:none;
  z-index:2;
  display:block;
  position:relative;
}
.inner{
  width:100%;
  height:100%; 
  background:#e62e8b;
  position:absolute; 
  left:-150px;
  transition:all .5s ease;
  z-index:1;
}
.outer:hover .inner{
  left:0;
}

その2:疑似要素でabsolute

Just a moment...

↑をいじったやつ↓
疑似要素使ってるほうが多い気がした

要素は通常状態で、疑似要素にabsoluteで始点(辺)を決めてホバー表示を指定してて、ホバーで100%にすることでスライド動作させている

CodePenのはbackgroundに色いれててテキストの下に色があるから、z-indexがなくてもテキストが普通に見えてる。けどbuttonに背景いれたらz-index指定しないとだめっぽいなぁ

通常時(黄緑)

buttonで通常表示を指定する。擬似要素の基準になるのでrelative

ホバー動作終了時(ピンク)

::afterでホバーしたときの最終的な真ピンクになる表示の指定。高さはあるが幅がないので何も表示されない。左辺に待機みたいな感じなのでhoverで100%になると右に伸びる表示になる。テキストの下にいくようにz-index指定

ホバー

buttonにホバーしたとき、疑似要素の幅を100%にする

ホバーアニメーション

疑似要素のとこがアニメーションしてるので::afterにtransition追加

<button>Hover</button>
button {
background: #c4d700;
border:none;
color: #fff;
display: block;
padding: 18px 53px;
position: relative;
z-index:1;
}
button::after {
transition: all 0.5s ease;
background: #e62e8b;
content: '';
position: absolute;
z-index: -1;
height: 100%;
left: 0;
top: 0;
width: 0;
}
button:hover {
cursor:pointer
}
button:hover::after {
width: 100%;
}

::beforeにしたら、z-indexなくてもテキストの裏に回るのかな?って思ったけど違った。普通にbuttonの上にきた。::beforeって別に下ではないんだな、なんか名前的にそうなのかなって……

その1と構成似てるような。その1はたぶん要素の幅が分かってないと使えなさそう……absoluteでその値使うし……その2のほうが便利そうな気はする

どうでもいいことだけど(どうでもよくない)タグがペーストできなくなってびっくりした。htmlのペーストしたらdivもaも表示されずにaタグ内の文字がリンク表示されててなぜタグが反映されてるのだ……?ってガチで謎なことになった。おかしい、前は普通にタグもペーストしたら文字列みたいに表示されてたのにな……その時点からアプデしてないのにな……

コメント

タイトルとURLをコピーしました