基于布尔值启用/禁用 Vue 转换

Question

在 Vue 中，我可以基于布尔值以某种方式禁用过渡动画吗？所以现在启用了动画：<transition name="fadeUp">  <div v-if="elIsVisible">    <p>Foo Bar</p>  </div></transition>但我希望我做这样的事情：<transition name="fadeUp" animation-enabled="false">  <div v-if="elIsVisible">    <p>Foo Bar</p>  </div></transition>或者也许是一个聪明的解决方法？这是一个基于模块的网站（每个块一个组件），如果用户可以启用/禁用某些块的动画，它可能会很漂亮。

Answer 1

您可以绑定:namein <transition>，如果设置为空，则不应用转换（例如未指定名称时）。

<transition :name="transitionName">

  <div v-if="elIsVisible">

    <p>Foo Bar</p>

  </div>

</transition>

<select @change="e => { transitionName = e.target.value }">

  <option

    v-for="transition in ['fadeUp', '']"

    :key="transition"

    :value="transition"

  >

    {{ transition }}

  </option>

</select>