基于布尔值启用/禁用 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

有一个解决方法，是的。v-bind:css您可以通过false在组件上设置为来跳过 CSS 检测<transition>。

new Vue({
  el: '#app',

  data: () => ({
    show: true,
    animated: true
  })
})

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

p {
  background-color: beige;
  border: 1px solid orange;
  padding: 4px 6px;
}

button {
  display: block;
  margin-top: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <transition name="fade" :css="animated">
    <p v-if="show">Hey, there!</p>
  </transition>

  <label>
    <input type="checkbox" v-model="animated" />
    Animated
  </label>
  <button @click="show = !show">Toggle visibility</button>
</div>