Vue.js勉強記録その21 コンポーネントを更に掘り下げる! 4-5 ver3
こちらの書籍で勉強中です。
今回は、主に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
もうちょいしたら、また自分でサンプル作ってアウトプットしたいですね。
この記事が気に入ったらサポートをしてみませんか?