时间戳

首页 > 解决方案 > 路由更改时元素上的 Vue 转换

vue.js - 路由更改时元素上的 Vue 转换

问题描述

语境：

我有一个导航组件，它出现在每个页面上，但该组件中有一个徽标元素，我根据用户所在的路线将其删除。我想在这个元素消失/出现时为其添加一个过渡效果，我已经尝试使用 Vue 过渡来做到这一点，如下所示。

问题是：

元素仅在this.header从 false 变为 true 时淡入 - 无论何时从 true 变为 false 都不会发生动画。

您可以在此代码沙箱中自己查看问题

边注：

CSS不是问题。我知道这一点，因为如果我改为使用按钮触发所需的效果，效果会非常好。这个问题似乎与使用路由器更改来触发动画的性质有关。你们中有人知道为什么会这样吗？

<template>
  <div class="headerNav">

      <transition name="fade">
        <div class="logo" v-if="!this.logo"></div>
      </transition>

  </div>
</template>

<script>
  export default {
    name: 'Navbar',
    components: {
      postFilter,
    },
    data() {
      return {
        logo: null,
      }
    },
    mounted() {
      //changing around the header depending on the page we are on so that we can use one header for all pages
      if (this.$route.name == 'Library' || this.$route.name == 'Profile') {
        this.logo = false
      } else {
        this.logo = true
      }
  }
</script>

CSS（这应该不是问题，但我还是包含了它）

.fade-enter-active {   
    transition: all .3s ease; 
} 
.fade-leave-active {   
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0); 
} 
.fade-enter, .fade-leave-to {   
    transform: translateY(10px);   opacity: 0; 
}

标签： vue.js

解决方案

根据评论和代码框，这是一个工作版本： https ://codesandbox.io/s/olz3jrk829

两个主要变化：

代替

<transition name="fade">
  <div class="logo" v-if="page"></div>
</transition>
<transition name="fade">
  <div class="logo two" v-if="!page"></div>
</transition>

将两者结合div在一个过渡中。Vue 需要键来确定每个部分：

<transition name="fade">
  <div v-if="page" class="logo" key="1">12</div>
  <div v-else class="logo two" key="2">34</div>
</transition>

使用computed函数代替mounted：

computed: {
    page() {
      if (this.$route.name == 'otherpage') {
        return false
      } else {
        return true
      }
    }
  }

最重要的是，您navigation在每个组件（home以及otherpage您的示例）中重用您的，因此离开转换不会从安装中触发。

正确的方法是navigation从homeand组件中移除该otherpage组件，因此它只在 中使用一次，App.vue这让所有其他组件共享一个 navigation实例。

这是您对更改的原始问题：

<template>
  <div class="headerNav">

      <transition name="fade">
        <div v-if="logo" class="logo" key="1"></div>
        <div v-else class="logo two" key="2"></div>
      </transition>

  </div>
</template>

<script>
  export default {
    name: 'Navbar',
    components: {
      postFilter,
    },
    data() {
      return {}
    },
    computed: {
      logo() {
        if (this.$route.name == 'Library' || this.$route.name == 'Profile') {
          return false
        } else {
          return true
        }
      }
  }
</script>

推荐阅读