0

我有以下页面，其中包含在转换标记中的 2 个父组件。他们之间的过渡顺利进行。

Page.vue 有 2 个组件：WithdrawalRequest 和 WithdrawalConfirm

<template>
  <v-container>
    <div class="mx-2 mt-8">
      <v-row>
        <transition name="fade" mode="out-in">
          <withdrawal-form
            @withdrawal-request="setWithdrawalRequest"
            v-if="!withdrawalRequest"
          ></withdrawal-form>
          <withdrawal-confirm
            v-else
            :withdrawal-request="withdrawalRequest"
          ></withdrawal-confirm>
        </transition>
      </v-row>
    </div>
  </v-container>
</template>

子组件 WithdrawalConfirm 也有 2 个包装在转换中的 v-cards。

这是一个简单的例子，但它也不起作用。我真的不明白为什么第二次过渡根本不起作用。我错过了什么吗？我已经花了几个小时进行测试。

<template>
  <div>
    <transition name="fade" appear>
      <v-card v-if="show">Card1</v-card>
      <v-card v-else>Card2</v-card>
    </transition>
    <v-btn @click="toggle">Toggle</v-btn>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
4

1 回答 1

1

您可以使用 v-if/v-else 在原始元素之间转换。最常见的两元素转换之一是在列表容器和描述空列表的消息之间：

但：

在具有相同标签名称的元素之间切换时，您必须通过赋予它们唯一的键属性来告诉 Vue 它们是不同的元素。否则，Vue 的编译器为了效率只会替换元素的内容。即使在技术上没有必要，在一个组件中始终键入多个项目也被认为是一种很好的做法。

例如： https ://jsfiddle.net/softvini/69ob4apu/17/

new Vue({
 el:"#app",
 data:{
  show: true
 }
})
.fade-enter-active{
  transition: opacity 1.5s;
}
   
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
   <transition name="fade" appear>
       <span key="card1" v-if="show">Card1</span>
       <span key="card2" v-else>Card2</span>
    </transition>
 </div>

更多信息在这里https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

于 2021-04-19T20:21:02.937 回答