Javascript 如何设置基于道具的动画过渡？

所以我对VueJS很在行，但我对React有经验。。。这没用

我最初的目标是提供4个页面，因为它们有一个“顺序”，所以转换类名会相应地改变

这是我的main.js文件

这是我的App.vue：

我想比较一下这两个订单道具，以了解要选择什么样的过渡，但是，由于我对Vue非常陌生，我正在努力正确地检索它们，或者可能我根本没有做什么好事

根据这个链接，道具应该在url中传递，这是我不想要的。此外，当我从router.before控制台登录时，每个方法似乎都不起作用，但我听说了nextTick，我找到了我的道具，但它无法找到我测试的道具

我怎样才能解决我的问题

---

提前感谢

下面是一个使用元参数确定要使用哪个动画的示例

Vue.useVueRouter； 康斯特之家={ 模板：` 家 你好

` }; 常量父项={ 资料{ 返回{ 转换名称：向左滑动， }; }, 在路由更新之前到、从、下一个{ this.transitionName=to.meta.animation； 下一个 }, 模板：` 父母亲 {{transitionName}} ` }; const Default={template:'Default'}； const Foo={template:'Foo'}； 常量Bar={template:'Bar'}； 常数路由=[ {path:/，组件：Home，td:3，元：{animation:'slide up'}，}， { 路径：/parent， 组件：父级， 运输署:1,， 元：{动画：'向下滑动'}， 儿童：[ {path:，component:Default，meta:{animation:'slide down'}， {path:foo，component:foo，meta:{animation:'slide right'}， {路径：条，组件：条，元：{动画：'向左滑动'} ] } ] 常量路由器=新的VueRouter{ 模式：历史， 路线 }; 新Vue{ 路由器， 模板：` 过渡 / /母公司 /家长/富 /家长/酒吧 ` }$mountapp； 。淡入激活状态。淡入保持激活状态{ /*过渡特性：不透明度*/ /*过渡时间功能：轻松*/ 过渡：全部.5s三次贝塞尔.55,0,1,1； } .fade进入，.fade离开活动状态{ 不透明度：0 } .视图{ 宽度：50%； 保证金：0自动； } .儿童视图{ 位置：绝对位置； 显示：块； 最高：50%； 过渡：全部.5s三次贝塞尔.55,0,1,1； } .向左滑入，.向右滑出激活{ 不透明度：0； -webkit转换：translate30px，0； 变换：translate30px，0； } .左滑离开活动状态，.右滑进入{ 不透明度：0； -webkit转换：translate-30px，0； 变换：translate-30px，0； } .向上滑动进入，.向下滑动保持活动状态{ 不透明度：0； -webkit转换：translate0，30px； 变换：translate0，30px； } .向上滑动保持活动状态，.向下滑动输入{ 不透明度：0； -webkit转换：translate0，-30p0； 变换：translate0，-30px； }

---

您可能想使用meta而不是props。props会传递给子组件，但是在RouteUpdateHey之前，路由处理程序可以访问meta。很抱歉回答/评论太晚，我现在还无法测试您的代码！这正是我需要的，现在我只需要将它调整到我自己的项目中，非常感谢！

import Vue from "vue";
import VueRouter from "vue-router";
import Landing from "./components/Landing.vue";
import Bio from "./components/Bio.vue";
import Shop from "./components/Shop.vue";
import Contact from "./components/Contact.vue";
import App from "./components/App.vue";
import "./assets/style.css";

Vue.config.productionTip = false;
Vue.use(VueRouter);

const router = new VueRouter({
  mode: "history",

  routes: [
    {
      path: "/",
      component: Landing,
      name: "landing",
      props: { order: 1 }
    },
    {
      path: "/bio",
      component: Bio,
      name: "bio",
      props: { order: 2 }
    },
    {
      path: "/shop",
      component: Shop,
      name: "shop",
      props: { order: 3 }
    },

    {
      path: "/contact",
      component: Contact,
      name: "contact",
      props: { order: 4 }
    }
  ]
});

router.beforeEach((to, from, next) => {
  // TypeError: Cannot read property 'props' of undefined
  console.log(from.matched[0].props);
  next();
});

let vm = new Vue({
  router,
  el: "#app",
  data: {
    transitionName: ""
  },
  render: h => h(App)
});

<template>
  <div id="app">
    <transition name="test"> // will soon be replaced by ":name="transitionName"
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
// I don't know what I'm doing
export default {
  props: ["className"],

  data() {
    return {
      transition: this.className
    };
  }
};
</script>


<style>
.test-enter-active,
.test-leave-active {
  transition-property: opacity;
  transition-duration: 0.25s;
}

.test-enter-active {
  transition-delay: 0.25s;
}

.test-enter,
.test-leave-active {
  opacity: 0;
}

#Todo: Add missing classNames;
</style>