幻灯片反向转换，Vue Js

Posted 2023-02-22

【中文标题】幻灯片反向转换，Vue Js

【英文标题】：Slide Reverse Transitions, Vue Js

【发布时间】：2018-02-19 00:26:51

【问题描述】：

我正在使用 Vue.JS 开发单页应用程序/移动应用程序。我想要换页时的幻灯片效果，可以这样：

transition name="slide"
 router-view transition
transition

但是当用户返回页面时，我想要幻灯片的反向效果。换句话说，当用户打开一个新页面时，页面会从右边来，但是当他们返回时，页面会从左边来。

Vue 路由器有一个插件，叫vue-router-transition，但是不起作用。它已经过时了，它只适用于非常旧版本的 Vue。

还有一个tutorial on dynamic transitions，但只适用于父路由，例如：example.com/rota1/rota2/rota3，这不是我的情况。

我想到了before.each.router中的如下逻辑，根据用户是否点击返回按钮来设置转换类（slide-left或slide-right）。

问题是我不知道如何在代码中应用这个逻辑。我必须将main.js 中的变量值传递给app.vue，但我不知道该怎么做。

【参考方案1】：

不久前，我在vue-router 中使用了meta 对象并添加了“假”深度，因为我没有任何子对象。如果您使用儿童，请使用以下示例：https://github.com/vuejs/vue-router/blob/dev/examples/transitions/app.js

export default () => 
  return [
      meta: 
        depth: 0
      ,
      path: '/home',
      component: Home
    ,
    
      meta: 
        depth: 1
      ,
      path: '/about',
      component: About
    ]

现在您可以像这样在App.vue 中自行检查。

watch: 
  $route(to, from) 
    const toDepth = to.meta.depth || 0;
    const fromDepth = from.meta.depth || 0;

    this.transitionName = toDepth >= fromDepth ? 'slide-left' : 'slide-right';
  

【讨论】：

没有。用我的解决方案你来决定。您将深度写入路由器对象，但通过计数“/”未检测到它。

它可以，但我认为这不是一个大项目的最佳解决方案，它会弄得一团糟，就像使用CSS的z-index定位许多div一样。

【参考方案2】：

我看到了 2 个选项：

在 Vuex "transitionBack" 中存储一个变量并将其设置为 true。将 router-link 更改为 @click 方法。在方法中，首先保存变量，然后导航到链接。在您的 beforeRouteUpdate(to, from, next) 方法中检查该变量。 在您的 beforeRouteUpdate(to, from, next) 方法中实现一些逻辑，以检查链接的名称（例如，如果您只能从某个页面“返回”，则保留所有这些类型页面的列表）

【参考方案3】：

希望这会有所帮助：

new Vue(
  el: '#demo',
  data: 
    slideTransition: 'slide-left',
    showChild: false,
  ,
  watch: 
    showChild(value) 
      if (value) 
        this.setSlideTransition('slide-right');
       else 
        this.setSlideTransition('slide-left');
      
    ,
  ,
  methods: 
    setSlideTransition(slideDirection) 
      // Note: 300ms mentioned below is matching with css transition timing
      setTimeout(() =>  this.slideTransition = slideDirection; , 300);
    ,
  ,
);

body 
  margin: 0;
  color: #bdbdbd;
  background-color: #161616;
  font-family: Helvetica neue, roboto;


.container 
  width: 500px;
  background: #161616;


main 
  width: 60%;
  height: 300px;
  background-color: #333;


aside 
  width: 40%;
  background-color: #555;


.container, main, .parent, .child, .content 
  display: flex;
  align-items: center;
  justify-content: center;


.parent 
  background-color: deepskyblue;


.child 
  background-color: deeppink;


.container, main, aside 
  position: relative;
  height: 199px;


.pin 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;


.pt-50 
  padding-top: 50px;


/* transitions */
.fade-enter-active,
.fade-leave-active 
  transition-property: opacity;
  transition-duration: 0.25s;


.fade-enter-active 
  transition-delay: 0.25s;


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


.slide-left-leave-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-right-enter-active 
  transition: 0.3s;


.slide-left-enter 
  transform: translate(100%, 0);


.slide-left-leave-to 
  transform: translate(-100%, 0);


.slide-right-enter 
  transform: translate(-100%, 0);


.slide-right-leave-to 
  transform: translate(100%, 0);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="demo" class="container">
  <aside>
    <transition name="fade">
      <div class="pin parent" v-if="!showChild">
        <div>
          <h1>Parent</h1>
          <a href="#" @click="showChild = true">Go To Child</a>
        </div>
      </div>
    </transition>
    <transition :name="slideTransition">
      <div class="pin child" v-if="showChild">
        <div>
          <h1>Child</h1>
          <a href="#" @click="showChild = false">Go To Parent</a>
        </div>
      </div>
    </transition>        
  </aside>
  <main>
   <div>
    <h1>Main</h1>
    <transition name="fade">
      <div v-if="showChild" class="pin content pt-50" key="child">
        <h4>Child Content here</h4>
      </div>
      <div v-else="" class="pin content pt-50" key="parent">
        <h4>Parent Content here</h4>
      </div>
    </transition>
   </div>
  </main>
</div>