Vue.js 可以<；过渡>；元素是否可用于为nuxtjs应用程序中的各个页面元素设置动画？

有人能告诉我，在nuxt中，页面元素上是否可以使用

transition

元素制作动画吗？我已经看过关于页面转换的文档，但是我想制作一些不同页面元素的动画。到目前为止，我所拥有的似乎不起作用

在一个简单的标题组件中，我有：

<template>    
<transition name="menu-popover">
    <ul class="MenuPopover">
        <li>Payments</li>
        <li>Subscriptions</li>
        <li>Connect</li>
    </ul>
</transition>    

付款
订阅
连接

在该组件的样式标记中：

<style scoped>
.menu-popover-enter {
    opacity: 0;
    transform: rotateY(50deg);
}

.menu-popover-enter-to {
    opacity: 1;
    transform: rotateY(0deg);
}

.menu-popover-enter-active {
    transition: opacity, transform 200ms ease-out;
}

.菜单弹出式输入{
不透明度：0；
变换：旋转（50度）；
}
.menu popover进入{
不透明度：1；
变换：旋转（0度）；
}
.菜单弹出框进入活动状态{
过渡：不透明度，变换200ms缓和；
}

---

解决方案1:

查看，它介绍了如何一步一步地很好地实现每个页面（或特定页面）的转换

解决方案2（不建议使用，但如果您真的喜欢在一个

内手动使用

）：

步骤：

把

放在

里面，就像

为过渡效果添加css类

css将类似于：

.test-enter {
    opacity: 0;
    transform: rotateY(50deg);
}

.test-leave-to {
    opacity: 0;
    transform: rotateY(100deg);
}

.test-enter-active,.test-leave-active {
    transition: all 2s ease-out;
}

为路由器导航器添加一个处理程序（或类似于触发路由更改的按钮单击事件） 处理程序如下所示：

changePage: function (newUrl) {
  this.pageShow = false //hide current page to trigger the transtion for `leave` current page
  setTimeout(()=> {
    this.pageShow = true //show new page, it will trigger the transition for `enter` new page
    this.$router.replace(newUrl) //with new url
  }, 2000) // delay 2s (after the transition of previous page finishes)
}

他们已经很好地介绍了如何做。