上下文：

Question

上下文：

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

问题是：

仅当this.header从false变为true时元素才会淡入-每当元素从true变为false时都不会发生动画。

您可以在此code sandbox

中自己查看问题

旁注：

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

Answer 1

根据注释和代码框，这是一个有效的版本：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 needs keys to determine each section：

<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和home组件中删除otherpage组件，因此仅在{{1}中一次一次使用}，让所有其他组件共享一个 App.vue实例。

这是您最初的更改问题：

navigation

路线更改时元素上的Vue过渡

上下文：

问题是：

旁注：

1 个答案: