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

【问题标题】：VueJS - Is there a way to conditionally apply a transition?VueJS - 有没有办法有条件地应用转换？
【发布时间】：2020-02-17 03:52:16
【问题描述】：

我想做的是创建一个警报框组件，其中包含一个可选的自定义显示过渡，如下所示（为简洁起见进行了编辑）：

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

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

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

有什么建议吗？

【问题讨论】：

vue.js 的新手，所以不确定下面的建议是否有效。用条件动态应用 css 类并在 css 类中保持过渡效果怎么样？
使用带有过渡的 CSS 类只会否定 Vue 的强大功能。如果您使用的是 Vue...，请使用 Vue。

标签： vue.js bootstrap-vue

【解决方案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>

【讨论】：

感谢您的详细回复。完美运行。

【解决方案2】：

使用内联三元条件

如果您只需要快速检查变量，这是一个选项：

<transition :name="someVariable == 'someValue' ? 'myTransitionA' : 'myTransitionB'">

someVariable 可以是任何东西（prop、data、computed、method...）。

如果您根本不希望特定条件的转换，请将转换名称（例如'myTransitionB'）设置为空字符串''。

我使用这种技术来根据不同的 UI 上下文（例如移动与桌面）切换转换。例如，我希望控制栏在移动设备中滑入滑出，但我希望它们在桌面上是静态的。

【讨论】：