VueJS - 有没有办法有条件地应用转换？

Question

我想要做的是创建一个带有自定义显示转换的警报框组件，该组件是可选的，如下所示（为简洁起见进行了编辑）：

<template>
    <transition v-if="withTransition">
        <b-alert v-bind="this.$attrs" />
    </transition>
</template>

我将有一个withTransition道具，理想情况下，它只会有条件地渲染过渡效果，而不会影响警报框的渲染。

v-if并且v-show不会起作用，因为这些属性也会显示和隐藏警报组件。另外，AFAIK<transition>不会呈现为 DOM 元素，所以我不确定如何有条件地呈现，如果有的话。

有什么建议？

Answer 1

您可以使用动态过渡并绑定到一个过渡名称（使用计算属性），当您想要禁用效果时，该名称不执行任何操作。

例如...

new Vue({
  el: '#app',
  data: () => ({ withTransition: true, show: false }),
  computed: {
    computedTransition () {
      return this.withTransition && 'fade'
    }
  }
})

.alert {
  background-color: #f99;
  border: 1px solid #f66;
  padding: 1rem;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <p>
    <label>
      With transition:
      <input type="checkbox" v-model="withTransition"/>
    </label>
  </p>
  <p><button type="button" @click="show = !show">Toggle alert</button></p>
  <transition :name="computedTransition">
    <p class="alert" v-if="show">Something happened</p>
  </transition>
</div>