Vue + Nuxt - 单击按钮时的不同页面转换

Question

我正在构建一个Vue应用程序并从NuxtJS开始。 NuxtJS有一个内置页面转换模块，因此添加页面转换很容易，但现在我想在单击特定按钮时显示不同的转换。

所以： 我正在路线＆＃39; / test＆＃39;，当我点击菜单到＆＃39; / post＆＃39;时，它必须淡出，但当我点击＆内的按钮时＃39; /测试＆＃39;路线，它应该向左滑动，下一条路线也必须向左滑动。

现在我只有这样的事情：

<template>
  <div>
    <section class="container">
      <div class="content">
        Testcomponent<br/>
        {{transition}}
        <button v-on:click="test">Posts!</button>
      </div>
    </section>
  </div>
</template>

<script>

export default {

  data() {
    return {
      transition: 'page',
      title: 'default'
    }
  },
  methods: {
    test() {
      this.transition = 'slide';
      this.$router.push('/posts');
    }
  },

  transition: {
    enterClass:`${this.transition}-enter`,
    enterToClass:`${this.transition}-enter-to`,
    enterActiveClass:`${this.transition}-enter-active`,
    leaveClass:`${this.transition}-enter`,
    leaveToClass:`${this.transition}-enter-to`,
    leaveActiveClass:`${this.transition}-enter-active`,
  }

  // transition: {
  //   beforeEnter(el){
  //     alert('testtest');
  //     console.log(el);
  //     // transition: 'fade'
  //   }
  // }
  // transition: {
  //   name: this.clicked ? 'slide' : 'page'
  // }
}
</script>