基于布尔值启用/禁用 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">&nbsp; <div v-if="elIsVisible">&nbsp; &nbsp; <p>Foo Bar</p>&nbsp; </div></transition><select @change="e => { transitionName = e.target.value }">&nbsp; <option&nbsp; &nbsp; v-for="transition in ['fadeUp', '']"&nbsp; &nbsp; :key="transition"&nbsp; &nbsp; :value="transition"&nbsp; >&nbsp; &nbsp; {{ transition }}&nbsp; </option></select>