<transition> 元素可以用于在 nuxtjs 应用程序中为单个页面元素设置动画吗？

Question

谁能告诉我 transition 元素是否可以用于 nuxt 动画的页面元素？我看过有关页面转换的文档，但我想为许多不同的页面元素制作动画。到目前为止，我所拥有的似乎没有用。

在一个简单的 Header 组件中，我有这个：

<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;
}

Answer 1

方案一：

一步一步看Nuxt Guide: Page Transition, it introduces how to implement the transition for each page (or specific pages Nuxt API: Page Transition)很好。

解决方案 2（不推荐，但如果真的更喜欢在一个 <transition> 中手动使用 <nuxt /> ):

步骤：

把<nuxt>放在<transition>里面，比如<transition name="test"><nuxt v-show="pageShow"/></transition>
为过渡效果添加cssclass，

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)
}

<transition> 元素可以用于在 nuxtjs 应用程序中为单个页面元素设置动画吗？

Can the <transition> element be used to animate individual page elements in a nuxtjs application?

vue.js

nuxt.js