时间戳

首页 > 解决方案 > 基于布尔值启用/禁用 Vue 转换

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>

或者也许是一个聪明的解决方法？

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

标签： javascriptvue.js

解决方案

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

推荐阅读