Toggle Vue transitions on and off with a boolean parameter

Question

Toggle Vue transitions on and off with a boolean parameter

Is there a way to dynamically disable a transition animation in Vue based on a boolean value?

Currently, the animation is enabled with the following code:

<transition name="fadeUp">
  <div v-if="elIsVisible">
    <p>Foo Bar</p>
  </div>
</transition>

However, I would like to achieve something like this:

<transition name="fadeUp" animation-enabled="false">
  <div v-if="elIsVisible">
    <p>Foo Bar</p>
  </div>
</transition>

Are there any smart workarounds for achieving this?

This is for a module-based website where each block corresponds to one component. It would be useful if users could easily enable or disable animations for specific blocks.

javascript vue.js

Answer 1

Answer №1

Looking for a way around the CSS detection? You can bypass it by simply setting v-bind:css to false on the <transition> component.

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>

Answer 2

Looking for a way around the CSS detection? You can bypass it by simply setting v-bind:css to false on the <transition> component.

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>

Answer 3

Answer №2

In the <transition> tag, you have the option to bind :name. If this is set to empty, no transition will be applied (similar to when no name is provided).

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

Answer 4

In the <transition> tag, you have the option to bind :name. If this is set to empty, no transition will be applied (similar to when no name is provided).

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

Toggle Vue transitions on and off with a boolean parameter

Answer №1

Answer №2

Similar questions

Navigating and Displaying Content with Vue.js

Guide on selecting every input field located within a table

Node.js express version 4.13.3 is experiencing an issue where the serveStatic method is not properly serving mp3 or

[VUE ALERT]: Issue found in mounted hook: "The variable this.$refs.canvas is not defined."

Vuetify's v-badge showcasing an exceptionally large number in style

Trouble with top attribute functionality within animate function

javascript enables smooth and continuous scrolling

Laravel, Inertia, and Vue.js combine to duplicate the App_URL into the URL

There was an error in Angular at core.js:6150 stating that the object is not iterable due to a

Issue with loading Squarespace form when executing jQuery on Internet Explorer

Issue: $injector:unpr Unrecognized Provider: itemslistProvider <-

Can anyone point out where the mistake lies in my if statement code?

Is Typescript familiar with the import -> require syntax, but unfamiliar with the require -> import syntax?

Tips for testing Sequelize with Jasmine

Relocate the resizable handles in jQuery outside of the div elements

How can I showcase a child element's v-model as the v-model of a Vue component?

Issue with resetting Knockout.JS array - unable to make it work

What is the best way to design a Global Navigation menu for websites?

Steps for obtaining images using lazy loading: <img loading="lazy"

Issue with DWR and Android web browser