Question

我正在尝试使用动态过渡名称进行如下所示的 nuxt 页面过渡

export default{
    data() {
        return {
            prevHeight: 0,
            transitionName: 'page'
        };
    },
    transition: {
        name: this.transitionName,
        beforeLeave(el) {
            this.prevHeight = getComputedStyle(el).height;
        },
        enter(el) {
            const { height } = getComputedStyle(el);
            el.style.height = this.prevHeight;
            setTimeout(() => {
                el.style.height = height;
            }, 0);
        },
        afterEnter(el) {
            el.style.height = 'auto';
        }
    }
}

此代码将混合在所有页面组件中。

但是我在这里遇到了两个错误：

Cannot read property 'transitionName' of undefined

重定向到其他页面时，prevHeight 属性不会改变我像这样在里面加水
```
  watch: {
      'prevHeight'(height){
          console.log(height)
      }
  }
```
控制台不会打印任何内容

还有什么：我尝试使用回调函数而不是像这样的对象来修复它：

transition(){
     return {
        ...
     };
 }

但它不起作用。

我怎样才能做到这一点？我读了the doucment (Nuxt transitions)，但没有任何帮助。

非常感谢！

Answer 1

看了nuxt的资源代码，

<nuxt/>

可以简单地视为

<transition>
      <router-view/>
</transition>

所以，一切都清楚了，修改layouts/default.vue

<template>
    <main>
        <header>
            Header
        </header>
        <transition
            mode="out-in"
            :name="transitionName"
            @beforeLeave="beforeLeave"
            @enter="enter"
            @afterEnter="afterEnter">
            <router-view/>
        </transition>
        <footer>
            Footer
        </footer>
    </main>
</template>
<script type="text/javascript">
export default{
    data() {
        return {
            prevHeight: 0,
            transitionName: 'fade'
        };
    },
    methods: {
        beforeLeave(el) {
            this.prevHeight = getComputedStyle(el).height;
        },
        enter(el) {
            const { height } = getComputedStyle(el);
            el.style.height = this.prevHeight;
            setTimeout(() => {
                el.style.height = height;
            }, 0);
        },
        afterEnter(el) {
            el.style.height = 'auto';
        }
    }
}
</script>

就像一个 SPA 项目

ssr-nuxt 页面转换的动态转换名称

1 个答案: