Question

我想做的是创建一个带有自定义显示过渡的警报框组件，该显示过渡是可选的，类似这样（为简便起见进行了编辑）：

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

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

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

有什么建议吗？

Answer 1

您可以使用dynamic transitions并绑定到过渡名称（使用计算属性），该过渡名称在您希望禁用效果时不起作用。

例如...

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>

VueJS-有没有办法有条件地应用过渡？

1 个答案: