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

有一种解决方法，是的。您可以通过在.NET Framework: 4.5.2 Serilog: 2.8.0 MongoDb Driver: 2.9.2 Serilog MongoDb Sink: 4.0.0组件上将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;
}

Answer 2

您可以在:name中绑定<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>

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

2 个答案: