Struggling with implementing CSS transitions in Vue.js?

If you're looking for documentation on CSS transitions, it can be found here.

I believe I have set up my JSFiddle correctly for the transition to function as intended. However, I must admit that the documentation on CSS transitions appears to be somewhat lacking in detail.

Below is some basic HTML/CSS code that I hoped would allow Vue.js to produce a smooth fade effect:

CSS:

.fade-transition {
  opacity: 1;
  transition: all .45s linear;
}

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

HTML:

<div class="loading-overlay" v-if="loading" v-transition="fade">
  In 5 seconds, this overlay should fade out...
</div>

However, it seems that the fade effect is not working as expected. Any suggestions or advice?

JSFiddle

javascripthtmlcsscss-transitionsvue.js

Answer №1

To make the transition attribute work in your div element, simply delete the prefix v- before the transition.

<div class="loading-overlay" v-if="loading" transition="fade">
  This overlay should fade out in 5 seconds...
</div>

Answer №2

Replace v-transition with transition.

<div class="loading-overlay" v-if="loading" transition="fade">
  The overlay will fade out in just a few seconds...
</div>

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

Prototypes in Javascript objects containing number properties

Could someone shed light on why the "counter" property appears to reset with every new instance? I was anticipating it to function similarly to the "letters" property, which is shared among all instantiated objects. I stumbled upon this issue while testin ...

javascriptprototypeinstance-variablesjavascript-objects

Using multiple foreach loops within each other

After struggling with this issue for days, I've decided to seek some assistance :) I'm currently working on a project management tool that includes an edit-page where admins can modify project members and their roles within the project. My goal ...

phphtmltwitter-bootstrapfor-loopforeach

Incorporating a digital currency ticker onto your webpage

Hey there, I've been diving into the world of integrating third-party API's into my website and currently exploring the documentation provided by . I'm finding it challenging to grasp how to implement a specific ticker (such as BTC/USD) usin ...

javascript

Execute a function when the button is clicked

Currently in the process of learning HTML and Javascript. I was able to search online for information on how to navigate to a URL and extract a value from returned JSONP. However, the function is executing when I load the HTML page, and I would prefer it t ...

javascripthtml

Testing Vue Components with Screen Resizing and DOM Updates

I am currently working on a component that handles image display based on screen size: the image should be shown on desktop screens but hidden on mobile devices. <script> export default { name: 'MyComponentApp', } </script> <temp ...

vue.jsvuejs2jestjsvue-test-utils

Transitioning with a CSS cubic-bezier function results in a noticeable jump of the content

My transition in an accordion list is using cubic-bezier(0.68, -0.55, 0.265, 1.55), but the issue I am facing is that the content below is also 'jumping'. Does anyone have suggestions on how to create space below my accordion (ul list) so that w ...

jqueryhtmlcsstwitter-bootstrap

The object of type "XMLHttpRequest" does not possess the function "done"

Struggling to implement a simple AJAX GET request? In the callback section, you may encounter an issue where you want to call a function. See the code snippet below: $.ajax({ url: "<?php echo SITE_URL?>ajax_pages/ajx_getcard.php?id="+obj.v ...

javascriptjqueryajax

Effortlessly glide to the top of the webpage

After dedicating numerous hours to this task and being a newcomer to JavaScript/JQuery, I am still unsure of how to achieve the following: I have implemented a "back to top" anchor link in the footer of my pages that directs users back to the header. I am ...

javascripthtmlcss

Place the div at the bottom of the page or viewport if it is bigger

Is there a way to ensure that a div with a background remains at the bottom of the page, regardless of whether the content on the page pushes it down or not? Currently, I am using the following code: #bottomBar { position: absolute; bottom: 0; } ...

jqueryhtmlcss

jquery disable document manipulation function

I need to make some updates to a simple function that involves the current textarea. $(document).on("keydown", updated_textarea_var, function (e) { // do stuff }); To achieve this, I tried disabling the previous function and running a new one w ...

javascriptjquery

Block elements such as divs are displayed first before inline elements on a webpage

I have multiple child divs inside a parent div. I want the child divs to stack vertically (block) within the height of the parent div, but if they exceed the height, I want them to align horizontally (inline). I have provided an image and included my code ...

htmlpositionblockinline

Hyperlink to an HTML file located in a different directory and refresh the URL

Within my controller, I am managing an array of strings that represent various folder names. My goal is to retrieve the index.html file from each of these folders: $scope.folderNames = ['DCB', etc] I aim to create a link on my HTML page for eac ...

javascriptjavahtmlangular

Maintain consistent theme across various pages using javascript

So I successfully implemented a dark mode on the front page using the following script (sourced from W3schools) : <script> function darklightmode() { var element = document.body; element.classList.toggle("dmode"); } </script> ...

javascripthtmlcssdarkmode

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

javascriptjqueryhtml

Creating a sizable chart that spans across multiple pages

My PHP output generates an HTML table with size XL. I want to add a print button on the page that will automatically print out the table with correct formatting. Specifically, I hope to print the table horizontally with headers appearing on every printed ...

phphtmlcssprintinghtml-table

Display a spinner in React to indicate that child components are still loading

I am working with a modal window component that has the ability to process various types of HTML content, such as inline elements, image tags, iframes, and more. My question is, can the component be programmed to detect when the children elements have fin ...

javascriptreactjs

Integrating HTTP JSON responses into HTML using Ionic 2, Angular 2, TypeScript, and PHP: A comprehensive guide

Currently in the midst of developing my first Ionic 2 app, however, my understanding of typescript is still limited.. I aim to execute the authenticate() method within my constructor and then to: Retrieve the entire JSON response into the textarea and/o ...

htmljsonapiangulartypescript

When clicking on an item in the wishlist, only the text for that specific item should change,

Hi all, I'm in need of some assistance. I have successfully created a wishlist toggle where clicking on the heart icon changes it from an outline to solid. However, my issue lies in changing the tooltip text from "add to wish list" to "added to wish l ...

javascript

Experiencing inconsistent results with ticket seller kata evaluations

I'm working on improving my javascript testing skills through katas. I am facing some challenges with a specific one that involves creating a TicketClerk object to handle movie ticket transactions. ticketClark.js var TicketClerk = function() { thi ...

javascripttestingjasmine

Encountering a glitch while attempting to execute my test on webdriverio

Lately, I've encountered an issue while attempting to execute my webdriverio tests following an upgrade of my node version. The error message that now pops up is: 2022-01-11T12:45:05.628Z DEBUG @wdio/config:utils: Couldn't find ts-node package, n ...

javascriptnode.jsselenium-webdriverwebdriver-io