[英]Nuxt page transitions work locally, but not on firebase hosting
Im using nuxt page transition 2 different ways and they both work on localhost, but not on firebase hosting. 我使用nuxt页面转换2种不同的方式,它们都可以在localhost上运行,但不能在Firebase托管上使用。
I am using both the built in page transitons globally. 我正在全局使用这两个内置页面转换。 And also i tried defining the transitions on each page.
我也尝试在每个页面上定义过渡。 Both ways work on localhost but no animation is fired when it is hosted.
两种方式都可以在localhost上运行,但是在托管时不会触发任何动画。
First way - using global transitions 第一种方法-使用全局过渡
// Layout transitions
.layout-enter-active, .layout-leave-active {
transition: opacity 0.5s;
}
.layout-enter, .layout-leave-active {
opacity: 0;
}
// Page transitions
.page-enter-active, .page-leave-active {
transition: opacity 0.5s;
}
.page-enter, .page-leave-to {
opacity: 0;
}
Second way, using page defined transitons. 第二种方法,使用页面定义的过渡元素。
export default {
transition: 'fade',
components: {}
...
}
No error messages. 没有错误讯息。 In google Dev tools, the animation is not even fired.
在Google Dev工具中,动画甚至不会触发。
I solved the problem. 我解决了问题。 I had the CSS for the transitions in a global CSS file using this in nuxt.config
我在nuxt.config中使用它在全局CSS文件中进行转换的CSS
css: ['~/assets/global.scss'],
I needed to put the CSS for the transitions inside of a .vue component for it to work. 我需要将用于过渡的CSS放在.vue组件中,以使其正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.