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

Posted 2023-02-23

【中文标题】如何设置基于道具的动画过渡？

【英文标题】：How can I setup a props-based animate transition?

【发布时间】：2018-12-28 22:04:58

【问题描述】：

所以我真的不喜欢 VueJS，但我有使用 React 的经验......这没有帮助。

我最初的目标是提供 4 个页面，并且由于它们有一个“顺序”，因此转换类名会相应地改变。

这是我的main.js 文件

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

这是我的App.vue：

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

我想比较两个 order props 以了解要选择的转换，但是，由于我对 Vue 很陌生，我很难正确检索它们，或者我只是没有做任何擅长的事情全部。

根据此链接，道具是要在 url 中传递的，这是我不想要的。此外，当我从 router.beforeEach 方法控制台日志 from 时（to 似乎不起作用，但我听说过 nextTick() ），我找到了我的道具，但找不到它用我测试的。

我该如何解决我的问题？

提前谢谢你

【问题讨论】：

你可能想要使用meta 而不是props 将props 传递给子组件，但是路由处理程序beforeRouteUpdate 可以访问元数据

【参考方案1】：

这里是一个使用meta参数来决定使用哪个动画的例子

Vue.use(VueRouter);

const Home = 
  template: `
    <div class="home">
      <h2>Home</h2>
      <p>hello</p>
    </div>
  `
;

const Parent = 
  data() 
    return 
      transitionName: "slide-left",
    ;
  ,
  beforeRouteUpdate(to, from, next) 
    this.transitionName = to.meta.animation;
    next();
  ,
  template: `
    <div class="parent">
      <h2>Parent</h2>
      transitionName
      <transition :name="transitionName">
        <router-view class="child-view"></router-view>
      </transition>
    </div>
  `
;

const Default =  template: '<div class="default">default</div>' ;
const Foo =  template: '<div class="foo">foo</div>' ;
const Bar =  template: '<div class="bar">bar</div>' ;
const routes = [
   path: "/", component: Home, td: 3, meta: animation: 'slide-up', ,
  
    path: "/parent",
    component: Parent,
    td: 1,
    meta: animation: 'slide-down',
    children: [
       path: "", component: Default, meta: animation: 'slide-down',
       path: "foo", component: Foo, meta: animation: 'slide-right',
       path: "bar", component: Bar, meta: animation: 'slide-left'
    ]
  
]
const router = new VueRouter(
  mode: "history",
  routes
);

new Vue(
  router,
  template: `<div id="app">
      <h1>Transitions</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/parent">/parent</router-link></li>
        <li><router-link to="/parent/foo">/parent/foo</router-link></li>
        <li><router-link to="/parent/bar">/parent/bar</router-link></li>
      </ul>
      <transition name="fade" mode="out-in">
        <router-view class="view"></router-view>
      </transition>
    </div>`
).$mount("#app");

.fade-enter-active, .fade-leave-active 
/*   transition-property: opacity; */
/*   transition-timing-function: ease; */
  transition: all .5s cubic-bezier(.55,0,.1,1);

.fade-enter, .fade-leave-active 
  opacity: 0

.view 
  width: 50%;
  margin: 0 auto;

.child-view 
  position: absolute;
  display: block;
  top: 50%;
  transition: all .5s cubic-bezier(.55,0,.1,1);

.slide-left-enter, .slide-right-leave-active 
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);

.slide-left-leave-active, .slide-right-enter 
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);

.slide-up-enter, .slide-down-leave-active 
  opacity: 0;
  -webkit-transform: translate(0, 30px);
  transform: translate(0, 30px);

.slide-up-leave-active, .slide-down-enter 
  opacity: 0;
  -webkit-transform: translate(0, -30p0);
  transform: translate(0, -30px);

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.3.0/vue-router.min.js"></script>
<div id="app"></div>

【讨论】：

嘿，很抱歉迟到的答案/评论，直到现在我才能测试你的代码！这正是我所需要的，现在我只需要适应我自己的项目，非常感谢！