做网站简单还是app简单,wordpress随机播放器,百度餐饮网站建设,知更鸟wordpress主题你好同学#xff0c;我是沐爸#xff0c;欢迎点赞、收藏、评论和关注。
Nuxt 利用 Vue 的 Transition 组件在页面和布局之间应用过渡效果。
一、页面过渡效果 你可以启用页面过渡效果#xff0c;以便对所有页面应用自动过渡效果。
nuxt.config.js
export defaul…你好同学我是沐爸欢迎点赞、收藏、评论和关注。
Nuxt 利用 Vue 的 Transition 组件在页面和布局之间应用过渡效果。
一、页面过渡效果 你可以启用页面过渡效果以便对所有页面应用自动过渡效果。
nuxt.config.js
export default defineNuxtConfig({app: {pageTransition: {name: fade,mode: out-in}}
})如果在布局和页面中设置了过渡效果则在此处设置的过渡效果对那些页面将不再生效。
要在页面之间添加过渡效果请进行以下配置
app.vue
templateNuxtPage /
/templatestyle
.page-enter-active,
.page-leave-active {transition: all 0.4s;
}
.page-enter-from,
.page-leave-to {opacity: 0;filter: blur(1rem);
}
/stylepages/index.vue
templatedivh1Home page/h1NuxtLink to/aboutAbout page/NuxtLink/div
/templatepages/about.vue
templatedivh1About page/h1NuxtLink to/Home page/NuxtLink/div
/template切换导航时的效果
要为页面设置不同的过渡效果可以在页面中使用 definePageMeta设置pageTransition
app.vue
templateNuxtPage /
/templatestyle
/* ..其他过渡.. */.rotate-enter-active,
.rotate-leave-active {transition: all 0.4s;
}
.rotate-enter-from,
.rotate-leave-to {opacity: 0;transform: rotate3d(1, 1, 1, 15deg);
}
/stylepages/about.vue
script setup
definePageMeta({pageTransition: {name: rotate}
})
/script切换到关于页面将添加 3d 旋转效果
二、布局过渡效果 你可以启用布局过渡以便对所有布局应用自动过渡。
nuxt.config.js
export default defineNuxtConfig({app: {layoutTransition: { name: layout, mode: out-in }},
})要在页面之间添加过渡效果请进行以下配置
app.vue
templateNuxtLayoutNuxtPage //NuxtLayout
/templatestyle
.layout-enter-active,
.layout-leave-active {transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {filter: grayscale(1);
}
/stylelayouts/default.vue
templatedivpredefault layout/preslot //div
/templatestyle scoped
div {background-color: lightgreen;
}
/stylelayouts/orange.vue
templatedivpreorange layout/preslot //div
/templatestyle scoped
div {background-color: #eebb90;padding: 20px;height: 100vh;
}
/stylepages/index.vue
templatedivh1Home page/h1NuxtLink to/aboutAbout page/NuxtLink/div
/templatepages/about.vue
script setup langts
definePageMeta({layout: orange
})
/scripttemplatedivh1About page/h1NuxtLink to/Home page/NuxtLink/div
/template页面导航效果预览
当然你也可以使用以下方法将自定义应用于页面组件
pages/about.vue
script setup langts
definePageMeta({layout: orange,layoutTransition: {name: slide-in}
})
/script三、全局过渡效果 nuxt.config.js
export default defineNuxtConfig({app: {pageTransition: {name: fade,mode: out-in // default},layoutTransition: {name: slide,mode: out-in // default}}
})要覆盖全局过渡属性请使用定义单个 Nuxt 页面的页面或布局过渡并覆盖在 file 中全局定义的任何页面或布局过渡。
pages/some-page.vue
script setup
definePageMeta({pageTransition: {name: bounce,mode: out-in // default}
})
/script四、禁用过渡效果 特定页面禁用过渡
pages/some-page.vue
script setup
definePageMeta({pageTransition: false,layoutTransition: false
})
/script全局禁用过渡效果
nuxt.config.js
export default defineNuxtConfig({app: {pageTransition: false,layoutTransition: false}
})五、JavaScript 钩子 对于高级用例你可以使用 JavaScript 挂钩为你的 Nuxt 页面创建高度动态和自定义的过渡。这种方式为 JavaScript 动画库提供了完美的用例。
pages/some-page.vue
script setup langts
definePageMeta({pageTransition: {name: custom-flip,mode: out-in,onBeforeEnter: (el) {console.log(Before enter...)},onEnter: (el, done) {},onAfterEnter: (el) {}}
})
/script六、动态过渡 要使用条件逻辑应用动态转换可以利用内联中间件使用 to.meta.pageTransition进行判断。
layouts/default.vue
script setup langts
const route useRoute()
const id computed(() Number(route.params.id || 1))
const prev computed(() / (id.value - 1))
const next computed(() / (id.value 1))
/scripttemplatedivslot /div v-if$route.params.idNuxtLink :toprev⬅️/NuxtLink |NuxtLink :tonext➡️/NuxtLink/div/div
/templatepages/[id].vue
script setup
definePageMeta({pageTransition: {name: slide-right,mode: out-in},middleware (to, from) {if (to.meta.pageTransition typeof to.meta.pageTransition ! boolean)to.meta.pageTransition.name to.params.id! from.params.id! ? slide-left : slide-right}
})
/scripttemplateh1#{{ $route.params.id }}/h1
/templatestyle
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {transition: all 0.2s;
}
.slide-left-enter-from {opacity: 0;transform: translate(50px, 0);
}
.slide-left-leave-to {opacity: 0;transform: translate(-50px, 0);
}
.slide-right-enter-from {opacity: 0;transform: translate(-50px, 0);
}
.slide-right-leave-to {opacity: 0;transform: translate(50px, 0);
}
/style页面过渡效果
七、使用 NuxtPage 进行过渡 你可以使用 prop 配置 transitions 以全局激活 transitions。
app.vue
templatedivNuxtLayoutNuxtPage :transition{name: bounce,mode: out-in} //NuxtLayout/div
/template注意在单个页面上使用 definePageMeta不能覆盖此页面过渡效果。
好了分享结束谢谢点赞下期再见
