Javascript 将页面更改时的单个组件转换添加到nuxt组件的最佳方法？

到目前为止，我已经用CSS/SCSS进行了测试，它似乎只在第一页更改时起作用：

.page-leave-active {
  .news-item {
    @for $i from 1 through 10 {
      transition-delay: $i * 300ms;
    }
    transform: translateX(115%);
  }
}

---

我想知道有没有办法在组件中添加JS转换？是否有一个等价于

挂载

，但对于

卸载

？

如果您没有为ssr nuxt页面转换使用动态页面转换名称，只需在

转换

属性中添加代码，如中的示例

如果您使用的是动态页面转换名称，那么使用nuxt提供的

transition

属性会有点困难。我使用下面的代码作为动态页面转换名称，它对我来说很好（不要忘记编写您自己的

组件）

使用此方法而不是

，您可以在方法中轻松添加逻辑

从“Vue”导入Vue；
从“@/layouts/error”导入ErrorView；
导出默认值{
组成部分：{
错误视图
},
数据（）{
返回{
高度：0，
transitionName:“淡入淡出”
};
},
在创建（）之前{
Vue.util.defineReactive（this'numxt'，this.$root.$options.numxt）；
},
创建（）{
此.$router.beforeach（（到、从、下一个）=>{
让transitionName=to.meta.transitionName | | from.meta.transitionName；
如果（transitionName==='slide'）{
const toDepth=to.path.split（“/”）.length；
const fromDepth=from.path.split（“/”）.length；
transitionName=toDepth{
el.style.height=高度；
}, 0);
},
后中心（el）{
el.style.height='auto'；
}
}
}

这是你得到的

---

gif图片显示的演示的完整资源代码正在切换到Nuxt JS转换。您的解决方案似乎很有效，但我发现它有些过分：如果我要这样做，为什么要使用Nuxt？此解决方案仅适用于动态页面转换名称，因为Nuxtjs的转换不能为页面组件使用动态转换名称是，使用存储和它一起从内部切换功能components@hexangel616上面的代码专门用于自定义nuxt页面组件转换。如果要对nuxt页面组件中的组件使用

transition

，只需编写与在vue单页面组件中编写代码完全相同的代码即可。希望对你有帮助