Vue.js勉強記録その21 コンポーネントを更に掘り下げる! 4-5 ver3

Vue.js3超入門

こちらの書籍で勉強中です。
今回は、主にcssのanimationと、chapter4のおさらいです。

■キーフレームによる複雑なアニメーション

前回のファイルから、cssの一部を変更します。

前回までは、transformで動いていた動きを、animationを使って複雑なアニメーションを付けています。

前回の記事はこちら

HelloWorld.vue

<template>
 <div class="alert alert-primary">
   <h1>{{ title }}</h1>
   <p>{{ message }}</p>
   <button class="btn btn-primary mb-3" v-on:click="doAction">
     Show / Hide
   </button>
   <transition name="transit">
     <p v-if="flg" class="alert alert-light h5 trans">Transition!</p>
   </transition>
 </div>
</template>

<script>
export default {
 name: "HelloWorld",
 data: () => {
   return {
     title: "Trans & Anim",
     message: "Transition Sample!",
     flg: true,
     btn: "Hide",
   };
 },
 methods: {
   doAction() {
     this.flg = !this.flg;
   },
 },
};
</script>
<style scoped>
.trans {
 background-color: black;
 color: white;
 padding: 10px;
 font-size: 20px;
}
.transit-leave-active {
 animation: anim 5s;
}
.transit-enter-active {
 animation: anim 2.5s reverse;
}
@keyframes anim {
 0% {
   transform: translateX(0px) translateY(0px) rotateZ(0deg);
   opacity: 1;
   background-color: #ddf;
 }
 25% {
   transform: translateX(250px) translateY(0px) rotateZ(0deg);
   opacity: 1;
   background-color: #fdd;
 }
 50% {
   transform: translateX(0px) translateY(-100px) rotateZ(540deg);
   opacity: 1;
   background-color: #dfd;
 }
 75% {
   transform: translateX(250px) translateY(-100px) rotateZ(540deg);
   opacity: 1;
   background-color: #fdf;
 }
 100% {
   transform: translateX(0px) translateY(-200px) rotateZ(1080deg);
   opacity: 0;
   background-color: #ffd;
 }
}
</style>

.transit-leave-activeと.transit-leave-activeにanimationでanimを設定しています。.transit-leave-activeは、reverseにしています。

keyframesは、25%ずつ細かく設定してあります。transformの、translateの値と、opacityとbackground-colorを変えています。

Show / Hideをクリックすると、

最初は右に動き、

回転しながら左上に動き、

また右に動き、

左上に回転しながら、少しずつ不透明度が下がり、

最後は消える。

こんな感じの動きになります。

■Chalote4のまとめ

これで、Chapter4が終わりです。最後にまとめがあります。

1.算術プロパティのGetter、Setter
まぁまぁ重要との事

2.キーイベントとマウスイベント
こちらはとても重要との事

3.スロット
こちらもまぁまぁ大事との事

それ以外はそこまで重要ではないらしく、今すぐしっかり覚えなきゃって感じじゃないみたいです。

■（この記事の）まとめ

今回は、主にcssのanimationプロパティと、chapter4のまとめでした。色々な機能が出てきて、覚えきるのは大変ですねw

もうちょいしたら、また自分でサンプル作ってアウトプットしたいですね。