画面に入ったらフェードインする

今回は前回やった物スクロールすると発火するやつの続きで、文字をアニメーションするやつ

の前に。。。

jsではAnimation　APIと言う物がある。とっても簡単なので一応説明

const keyframes = {
opacity:[0,1],
translate:[`0 50px`, `0 0`]// X軸・Y軸
}
要素.animate(keyframes、2000)

上記で簡単に動く。

Vueでの実装

今回はCSSがメインなのでそこまでVueと関わらないけど一応。。。

<template>
<p ref="hello" class="ani" :class="{blue}">アニメーション</p>
</template>
<style>
.ani {
  opacity: 0;
  transform: translateY(100px);
}
.blue {
  animation: changeColor 2s ease forwards;
}
@keyframes changeColor {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

class=blueにあるforwardsはアニメーション最後の挙動を維持してくれるやつ

---

感想

今回は前回のスクロール位置からclassをつけてCSSをいじっただけなのでVue関係ない。。
次はカルーセルスライダーを実装しようかな。