この記事は最終更新日から1年以上が経過しています。

Nuxt.jsでTransitionを使用する

2021-03-22
2021-03-22

Transitionの設定

default.vueで使ってみる。

html
<template> <div> <TheHeader /> // 囲う <transition name="page" mode="out-in"> <nuxt /> </transition> // 囲う <TheFooter /> </div> </template>

name="page"とcssのプロパティが連携するので注意。

css
.page-enter { opacity: 0; } .page-enter-active { transition: opacity 1s; }

nuxt.config.jsの設定

nuxt.config.js

js
{ loading: false, }

loadingを表示したくない場合は、false
使用する場合は、

js
loading: { color: "#F9FAFB", height: "5px", },

のような形。

ポイント

資料