Vueバージョン確認
npm list vue
まずは上記コマンドでバージョンの確認
twinzlabo@0.1.0 /Users/twinzlabo
── vue@2.6.11
なにこの動き？１００倍センスを感じるアニメーション実装
上の方で確認してもらったかと思いますが、
すでに虹色の背景を付けたりとかなり洗練されている画像一覧に更にスタイル修正を行うことで
一方の画像をhoverするとスーッと画像全体が現れる不思議すぎてクールなアニメーション実装をしていきましょう
デフォルトの上の画像をhoverしたら下の画像のように一方の画像のタイトルが消えて全体像が現れる
アニメーションにカスタマイズしていきます
これやばくないですか？
上の画像を見てるだけだと実際の動きを想像しづらいかもしれませんが、
実装してみて初めてわかる快感を味わえます
これは損得抜きでまじでおすすめのアニメーションです
兎にも角にも、実装してみたら感動すること間違いなしです！
では早速コードをコピペしていきましょう
<template>
<div class="images">
<div class="image">
<img src="https://images.unsplash.com/photo-1513543806865-85e29a7c0352?ixlib=rb-1.2.1&auto=format&fit=crop&w=2775&q=80">
<span>Day</span>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80">
<span>Evening</span>
</div>
</div>
</template>
<style>
.images {
display: flex;
width: 100%;
padding: 4% 2%;
box-sizing: border-box;
height: 60vh;
}
.image {
flex: 1;
overflow: hidden;
transition: .5s;
margin: 0 2%;
box-shadow: 0 20px 30px rgba(0,0,0,.1);
line-height: 0;
}
.image img {
width: 200%;
height: calc(100% - 10vh);
object-fit: cover;
transition: .5s;
}
.image span {
background : linear-gradient(41deg, purple 25%, orange 50%, rgba(255, 107, 0, 0.48)) fixed;
font-weight: bold;
color: #fff;
font-size: 3.8vh;
display: block;
text-align: center;
height: 10vh;
line-height: 2.6;
border-top: 3px solid #fff;
}
.image:hover > img {
width: 100%;
height: 100%;
}
</style>
いかがでしたでしょうか？
画像をhoverするとタイトルが消えて画像の全体像が現れるアニメーションが実行されましたか？
実際に自分のローカルブラウザで反映できると動きも確認できてめっちゃ興奮しますよね
こちらに他にも面白いアニメーション実装記事があるので参考までに
以上です
参考記事（他の魅力的なアニメーション）
現役フロントエンドエンジニアがおすすめするコピペで使えるアニメーション記事まとめ１２選