Vue's animation happens without any delay or duration

I followed the Vue animation instructions from the documentation carefully:

  1. The transition component has a name="fade" attribute.
  2. v-if is placed in the child of the transition element.
  3. The styles were directly copied from the documentation provided.
new Vue({
  el: '#app',
  template: `
<transition name="fade">
  <div 
    class="NotificationBar" 
    v-if="show" 
    :class="{
      NotificationBar__Success: currentNotificationType === notificationBarTypes.success
    }" 
    @click="show = !show"
  >
    <div class="NotificationBar-Centerer">
      <svg class="NotificationBar-Icon-SvgCanvas" viewBox="0 0 24 24">
        <path class="NotificationBar-Icon-SvgPath" v-if="currentNotificationType === notificationBarTypes.success" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22C17.5s7-4.5l-1 3zuneigeSEslkjfnAlrekjhewjUWIE8ALSDKHJGAw9eiawkfAIWEHhQUDqWIUEWGOWHEGIERNalksjdflkweOIREkJNALKjerwieORGkwrltouNoierljwoFIUVNWnNaumiueRFNAIWRHLERincvOIARNenNYFDNBVeFWIOFEFM92232NDFnekFNE122343mnewifie98292039e02930encmfIJURFBNDVJKHDVNVIhnvdVKzhdfZinPIQRfneorfun98EH83742OKJSKgnsldkFn89EUBOAUFbna98ETHadODNSHle84732892LKEGETeygrUYDaosifSDKDIRSNLMcaidWDGfsBCAiufuisDHGstu78TDGHudsocyutegusbSportssSPORTSfootballFOOTBALLllawokskdslksdosasePOspinMOVIE895uoSFHuoo82ojmsnmoviemoviesELINKLNlsnkllokosereLTourTLECyclonesyBASKETLLAMA894823789217637891923nba88932749182179dasodmnoplaygd37583ncmcobackyardayugcfoeb");

To add to the experiment, I set the duration for the styles to be 10 seconds:

.fade-enter-active, .fade-leave-active {
    transition: opacity 10s;
}
.fade-enter, .fade-leave-to {
    opacity: 0;
}

However, I noticed that the animation appears to happen instantly, with no transition effect (duration seems to be 0s).

If you'd like to see a demonstration, please visit the JSFiddle link for a working example.

javascriptvue.jsanimation

Answer №1

The selectors inside .NotificationBar were incorrectly nested (in SCSS). To ensure the style applies correctly, make sure your selectors are not nested.

// Avoid nesting these within another selector or ensure
// that the selector you use here will properly apply to your element

.fade-enter-active, .fade-leave-active {
  transition: opacity 10s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

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

Troubleshooting Issues with MUI MultiSelect Dropdown in TypeScript: Unable to Select or Update Values

I've been attempting to create a multiselect dropdown list with checkboxes. The items in the dropdown are coming from an API call, and I'm trying to update a set of values to save back to the database. While I've succeeded in populating the ...

javascriptreactjstypescriptmaterial-ui

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: https://i.sstatic.net/lw1vC.png C ...

javascriptcssreactjsmaterial-ui

What is the best way to display a JavaScript object array on the screen

As someone who is new to JavaScript, I have a JavaScript object array that I would like to print the values of in the browser. However, I am unsure of how to do this without using document.write(vehicle); var vehicle = [{name:'Van',wheel:4,cha ...

javascripthtmlarraysobjectprinting

Different conversations are taking place concurrently. How can we determine which one is currently being attended to

In my application, multiple dialogs are open simultaneously, each with its own set of shortcuts. It is important to ensure that these shortcuts work correctly based on the focused dialog. Is there a way to determine which dialog is currently in focus? Ed ...

javascriptangulardialogprimeng

Tips for adding new elements to an array within an object

Here is a snippet of my current JSON data: { "_id" : 393, "item" : 34, "comments" : [ { "name" : "kevin", "messages" : [ "item", "item" ] }, { ...

javascriptjsonnode.jsmongodb

Using JavaScript and jQuery to populate an array with missing elements

Currently, I am in the process of generating raw data for a chart but have encountered a challenging issue that I am struggling to resolve. The data is stored in an array with nested arrays, representing the x and y-axis values. This array is populated b ...

javascriptjqueryarrays

Is there a way to create a smooth transition for a background image, starting from grayscale and gradually transitioning to

I have a Bootstrap website featuring a colored background image. I am looking to achieve a specific effect where the image begins in grayscale and slowly transitions into color as the page loads, without requiring any user interaction. How can I accomplis ...

htmlcsstwitter-bootstrapanimationfade

What could be causing the data storage issue in the state?

Using axios, I am fetching data and storing it in a state variable useEffect(() => { getCartItems(); }, []); const [abc, setAbc] = useState([]); const getCartItems = async () => { let data = await CartApi.get(`/${store.getState().auth.user.id}/ ...

javascriptreactjsaxios

The Jquery scroll function seems to be unable to detect the updated variable value that needs to be passed to

As someone who is not a traditional programmer, I have learned programming by searching on Google or asking questions on Stack Overflow. I am attempting to create an ajax function that will retrieve feeds from a database as the user scrolls, based on the ...

javascriptphpjqueryajaxscroll

Center align the message 'No file chosen' in the File Upload control horizontally

I am facing an issue with a file upload control that I have implemented. The code is provided below: <div class="row"> <div class="col-md-12"> <div class="alert alert-warning normal-text hide" role="alert" id="ImportErro ...

javascripthtmlcsstwitter-bootstrap

Transferring vast amounts of data between two HTML pages exclusively on the client side

Imagine we have two separate pages: X.html and Y.html. Even though they are not from the same origin (different domain, port, etc.), I have the ability to edit both of them. My goal is to incorporate Y.html into X.html using an iframe. The content of Y.ht ...

javascriptjqueryhtml

Challenge with NodeJS, Angular Seed, Gulp, Jasmine, and Karma

Starting an Angular Seed project and everything was working fine. I managed to launch the Jasmine browser, but encountered issues with my specs not working. In an attempt to fix this, I added a karma.conf file, which unfortunately broke the Jasmine browser ...

javascriptnode.jsangularjsgulpkarma-jasmine

The documentation for the 4-11.4 version of Material UI cannot be found anywhere

After the release of MUI v5.0.0-rc.1, it appears that all documentation pages for version 4, except for v4.12.3, have vanished. https://mui.com/versions/ Furthermore, (currently not accessible) Is there a way to access previous versions' document ...

javascriptreactjsmaterial-ui

Unable to progress in an HTML5 Drag and Drop application

I am currently learning HTML5 and I have encountered an issue with a specific example. The code is running without errors, but the drag and drop functionality is not working as expected. I have included the code snippet below. Could you please review it fo ...

javascripthtmldrag-and-drop

Sinon threw an assertion error out of the blue

Just diving into using Sinon and facing a small hiccup. Let's say we have a module (named myModule.js) defined as follows: //myModule.js var _f2 = function() { console.log('_f2 enter'); return {prop1:'var1'}; }; var f1 = ...

javascriptnode.jsunit-testingsinon

Adjusting the array when items in the multi-select dropdown are changed (selected or unselected)

I am looking to create a multi-select dropdown in Angular where the selected values are displayed as chip tags. Users should be able to unselect a value by clicking on the 'X' sign next to the chip tag, removing it from the selection. <searcha ...

javascriptcssangulartypescriptdrop-down-menu

The Eclipse IDE is experiencing issues with the functionality of the JavaScript Number class

In my latest project, I decided to create a Dynamic Web Project using the Eclipse IDE 2019-12 along with Apache Tomcat 8.5.55 server. The main functionality of this project is that a user can input integers and receive their sum as an output. To ensure dat ...

javascripthtmleclipse

Issue with referencing Asmx web service

I am struggling to properly reference my web service method with JavaScript on my client page. I keep receiving an error message that says "CalendarHandler is not defined". <%@ WebService Language="C#" CodeBehind="~/App_Code/CalendarHandler.cs" Class ...

javascriptasp.netajaxweb-servicesasmx

Refreshing a page in MVC after making an Ajax call to the controller

In my controller, I have the following code: public async Task < ViewResult > Favourites(string ids) { // API call to fetch book data if (data != null) { var bookList = JsonConvert.DeserializeObject < Book[] > (data); ...

javascriptajaxasp.net-mvcrazor

What is the best way to find the index of a row in a Bootstrap Vue table?

When working with a v-for in Vue, I typically do it like this: v-for="(test, index) in tests" Is there a way to achieve the same result using Bootstrap Vue? Specifically, how can I access the index of all TR elements? <b-table :items="items" :field ...

vue.jsbootstrap-vue