Nuxt.js设置页面跳转过渡动画

最新推荐文章于 2024-07-05 15:25:49 发布

Tiramisu_C

最新推荐文章于 2024-07-05 15:25:49 发布

阅读量9.2k

点赞数 1

分类专栏： nuxt 前端开发项目问题解决方案文章标签： nuxt 过渡动画页面过渡

本文链接：https://blog.csdn.net/nongweiyilady/article/details/79002263

版权

本文介绍了如何在 Nuxt.js 项目中设置页面跳转过渡动画。首先，创建了一个名为 `page-transletion.css` 的文件，用于定义过渡效果。接着，在 `nuxt.config.js` 中进行配置，确保过渡动画生效。通过测试两个页面间的跳转，可以看到过渡效果。此外，还讨论了如何为特定页面添加个性化的过渡样式，并提供了官方文档链接作为参考。

摘要由CSDN通过智能技术生成

1.在/assert目录下建立一个page-transletion.css文件，里面包含过渡动画内容，内容如下：

 
  .page-enter-active, .page-leave-active { 
 
  transition: opacity 
   .5s; 
 
   } 
 
  .page-enter, .page-leave-active { 
 
  opacity: 
  0; 
 
   }