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

在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>

富吧

或者是一个聪明的工作环境

---

---

这是一个基于模块的网站（每个块一个组件），如果用户能够为某些块启用/禁用动画，那么它可能会很漂亮

您可以在

中绑定

：name

，如果将其设置为空，则不会应用任何转换（如未指定名称时）

富吧

{{transition}}

有一个解决办法，是的。通过在

组件上设置为

false

，可以跳过CSS检测

newvue({
el:“#应用程序”，
数据：（）=>({
秀：没错，
动画：真的
})
})

。淡入激活状态，
.淡入淡出激活状态{
转变：不透明度。5s；
}
.淡入，
.淡出{
不透明度：0；
}
p{
背景颜色：米色；
边框：1px实心橙色；
填充：4px6px；
}
钮扣{
显示：块；
边缘顶部：2米；
}

嘿，那里

有生气的
切换可见性

<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>