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.

javascriptvue.js

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever the page is refreshed, the props in my application are dynamically updated thanks to the getStaticProps function I utilize

Currently, I am in the process of learning nextjs as a beginner. Through the utilization of the getStaticProps function, I have come to understand that data fetching occurs only once at build time and the values remain static thereafter. Despite this, I ...

javascriptnext.js

Tips for augmenting cell with additional data in react-datepicker

Is it possible to include additional text in a cell using react-datepicker? For example, similar to what is shown in this image: view image here ...

javascriptreact-datepicker

When using jQuery and AJAX together, it seems that the POST method is returning

Currently experimenting with Cloud9. The current project involves creating an image gallery. On the initial page: There are a few pictures representing various "categories". Clicking on one of these will take you to the next page showcasing albums fro ...

javascriptphpjqueryhtmlajax

A web application using JavaScript and Node.js with a focus on creating a REST

After extensive research, I am eager to develop a web application using JavaScript and Node.js with an SQL back-end. However, the abundance of frameworks and tools available has left me feeling overwhelmed. While I have identified some that I would like to ...

javascriptjquerynode.jstwitter-bootstrapweb-applications

The function will not be triggered when the form is submitted

I've set up this form to send data to the server-side. It's built in HTML/CSS with AngularJS as well. I made sure that the button is placed inside the form, a common mistake that can cause issues. However, despite my efforts, the function "onAddE ...

javascripthtmlcssangularjsweb

When transferring an object from a blade template to a Vue component through props, it may become undefined

I'm facing an issue where I am attempting to send an array from an asynchronous method in the controller to a Vue component using props within a blade template. However, when I try to log it in the Vue component, it shows up as undefined. Here is the ...

javascriptlaravelvue.jsvue-props

Modifying radio inputs to update when a state variable is altered in react.js

In my HTML, I have a div that includes 4 radio inputs, and another div with an onClick event that increments a counter. Every time I click on the div, I want the radio inputs to reload so that no input is selected. Below is the code snippet: 'use clie ...

javascriptreactjsnext.js

Choose the text that appears in the input or textbox field when tapping or clicking on it

Desperately Seeking a Clickable Textbox The Quest: In search of a cross-browser textbox/input field that can select its content on click or tap. An elusive challenge haunting developers for years. The Dilemma: Using a touch device triggers the tap e ...

javascriptjqueryiosselecthtml-input

Implement the useEffect() function to handle the loading of external JavaScript on the client-side, replicating the

I have encountered a challenge while trying to integrate a rich text editor into my NextJS project. Since there are no available React components for this specific editor and it operates solely on the client side, I am required to load the necessary JavaSc ...

javascriptreactjsnext.js

Viewing HTML web pages using Mozilla Firebox

Printing an HTML table with lots of content has been a challenge for me. Google Chrome didn't work, so I switched to Mozilla Firefox. However, now Firefox is breaking the page inside the table. My question is how can I trigger print preview in Firefox ...

javascriptjqueryhtmlcssmozilla

Issue with Nextjs environmental variables not functioning in JavaScript pages

Currently, I am in the process of developing a Next.js website. Within my JavaScript file, I am fetching data from an API and assigning a token using the .env.local file. However, when attempting to access the .env variable that I've set up, it seems ...

javascriptreactjsnext.jsenvironment-variables

React Router - Implementing a <Redirect> element rather than a list of child components

Here is the code snippet I am working with: import { Redirect } from 'react-router-dom'; import QPContent from '../QPContent'; class AnswerContainer extends Component { constructor(props) { super(props); this.state = { ...

javascriptreactjsreact-router

React - Issue with Input event handling when utilizing both onChange and onKeyDown functions

I was attempting to create a feature similar to a multi-select, where users could either choose a value from a list or enter a new value. The selected value should be added to an array when the user presses the enter key. To monitor changes in the input ...

javascriptreactjs

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml

Monitor the user's attendance by utilizing two separate for loops

I'm currently developing an angularjs attendance tracking system and I'm facing challenges when it comes to accurately counting the number of days an employee is absent. Despite attempting to solve this issue with two nested for loops, I am still ...

javascriptangularjsfor-loop

The table is not visible when using Bootstrap Vue

Can anyone help me with displaying a table of flowers? I am having trouble making it show up on my page. Not quite sure how to use my data to get the flowers to display properly. Any guidance or advice would be greatly appreciated. <b-table> ...

javascripttwitter-bootstrapvue.jsbootstrap-4bootstrap-vue

retrieving data from GET variables and sending to a PHP array

Is there a way to retrieve form variables and store them in an array in memory without reloading the page? I'm not very experienced with this, so any guidance would be appreciated. My goal is to update a JSON file using PHP based on form inputs. JSON ...

javascriptphpjson

Identify the browser dimensions and implement CSS styling for all screen resolutions

I am currently facing an issue with a function that I have created to apply CSS changes to a menu based on browser resizing and different resolutions. The problem lies in the fact that my function does not seem to be correctly interpreted by the browser. W ...

javascriptjqueryhtmlcss

Create compelling visual representations by utilizing Google charts to draw customized charts based on variable

I have been attempting to create a chart using Google Charts by passing some parameters to the function. I am trying to use these parameters to populate the data, but it doesn't seem to be working as expected. Is it possible to include parameters in t ...

javascriptchartsgoogle-visualization

Tips for fixing the "Uncaught TypeError: Cannot access property 'get' of undefined" error in Vue.JS 2

Here is my component: methods: { reloadMessage() { setTimeout(function () { this.$http.get(window.BaseUrl + '/message/inbox'); }, 1500); } } And here are my routes: Route::group(['prefix' => &ap ...

javascriptvue.jslaravel-5.3vuejs2vue-component