为什么带有 v-if 的元素内的过渡不进入过渡但离开有效？

Question

标题几乎解释了一切。我在 StackOverflow 上搜索了解决方案，但都没有 帮助。

使用经典模态组件的示例：

Vue.component('modal', {
  template: `
  <transition name="modal">
    <div class="modal-wrapper">
      <div class="modal-dialog">
        <slot></slot>
      </div>
    </div>
  </transition>
  `,
})

const app = new Vue({
  el: '#app',
  data: {
    showModal: false,
  },
})

/* transition */
.modal-enter-active,
.modal-leave-active {
  transition: opacity .5s;
}

.modal-enter,
.modal-leave-to {
  opacity: 0;
}

.modal-wrapper {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .25);
}

.modal-dialog {
  max-width: 90%;
  padding: 1em;
  background: white;
}

<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <p><button @click="showModal = true">Show modal</button></p>
  <modal v-if="showModal">
    <h3>Hello world</h3>
    <p>Amet quam alias amet incidunt voluptatum sapiente Mollitia</p>
    <p><button @click="showModal = false">Close</button></p>
  </modal>
</div>

（控制台也没有错误）

不过使用时一切正常v-show。但我不能真正在我的项目中使用它来代替 v-if 。

Vue.component('modal', {
  template: `
  <transition name="modal">
    <div class="modal-wrapper">
      <div class="modal-dialog">
        <slot></slot>
      </div>
    </div>
  </transition>
  `,
})

const app = new Vue({
  el: '#app',
  data: {
    showModal: false,
  },
})

/* transition */
.modal-enter-active,
.modal-leave-active {
  transition: opacity .5s;
}

.modal-enter,
.modal-leave-to {
  opacity: 0;
}

.modal-wrapper {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .25);
}

.modal-dialog {
  max-width: 90%;
  padding: 1em;
  background: white;
}

<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <p><button @click="showModal = true">Show modal</button></p>
  <modal v-show="showModal">
    <h3>Hello world</h3>
    <p>Amet quam alias amet incidunt voluptatum sapiente Mollitia</p>
    <p><button @click="showModal = false">Close</button></p>
  </modal>
</div>

也就是说，我必须在使用模态的所有地方<modal>进行包装，并从模态本身中删除过渡（这听起来不太好）<transition>

<transition name="modal">
  <modal>
  ...
  </modal>
</transition>

为什么会这样以及如何使输入动画起作用（在模态组件中使用v-if, 和？<transition>

我注意到 Vue 2.5（而不是 Vue 2.6）不存在这样的问题。从那时起肯定发生了一些变化。

Answer 1

您缺少该appear属性。

\n

默认情况下，首次插入元素时，Vue 不会动画。根据文档：

\n

\n

如果您还想在节点的初始渲染上应用过渡，则可以添加外观属性：

\n

<transition appear>\n  <!-- ... -->\n</transition>\n

\n

默认情况下，这将使用为进入和离开指定的转换。如果您\xe2\x80\x99d喜欢，您还可以指定自定义CSS类：

\n

<transition\n  appear\n  appear-class="custom-appear-class"\n  appear-to-class="custom-appear-to-class"\n  appear-active-class="custom-appear-active-class"\n>\n<!-- ... -->\n</transition>\n

\n

\n

因此，只需添加appear即可解决问题。

\n