画面の右から左へ移動するアニメーションを実装したので、書き残しておきます。
この記事では Nuxt.js を使ったプロジェクトのなかに、SVG ファイルを使ってアニメーションを実装しています。
＊DEMO
＊環境
- macOS
- nuxt 2.8.1
- CSS3
＊参考
＊SVGファイルの配置
SVGファイルを用意してassetsディレクトリに配置します。Nuxt.js では画像ファイルなどは
assetsかstaticディレクトリに置きます。webpack でのコンパイルが必要なファイルはassets、不要であればstaticに配置します。今回は
assets/icons/car.svgに配置しました。＊アイコンコンポーネントの作成
アイコンを表示するためのコンポーネントを作成します。表示するページに直接書いても問題ないですが、コードが複雑にならないよう出来るだけコンポーネント化しています。
CSS の
background-imageで SVG ファイルを読み込み、animationで X 軸方向に移動させています。Nuxt.js で画像を読み込むときは「~」で始まるようにします。また、widthを100%にすることで、画面から見切れるまで移動させることができます。<components/IconCar.vue>
<template>
<div class="car move-to-right"></div>
</template>
<style scoped lang="scss">
.car {
position: absolute;
top: 145px;
left: 10px;
width: 100%;
height: 100px;
background-image: url('~assets/icons/car.svg');
background-repeat: no-repeat;
}
.move-to-right {
animation: icon-move 40s infinite;
}
@keyframes icon-move {
from {
transform: translateX(-10%);
}
to {
transform: translateX(100%);
}
}
</style>
表示するメインのページに作成したアイコンコンポーネントをインポートします。
<pages/index.vue>
<template>
<div>
<icon-car></icon-car>
</div>
</template>
<script>
import IconCar from '~/components/IconCar'
export default {
components: {
IconCar
}
}
</style>
＊所感
今回は指定をしていませんが、アニメーションの速さを変更したり、指定した秒数分の時間を遅らせてアニメーションを実行することもできます。場面によって使い分けていきたいと思います。Sign up here with your email
ConversionConversion EmoticonEmoticon