Sequentially animate objects with a fade-out and fade-in effect

Attempting to achieve a fade-out, fade-in animation using JavaScript and CSS. Here is the CSS animation code:

@keyframes fade-in{
0%{
  opacity: 0%;
}
100%{
  opacity: 100%;
}
}

@keyframes fade-out{
0%{
  opacity: 100%;
}
100%{
  opacity: 0%;
}
}

Implemented a script to toggle display between sections with the animations in between:

function changingDisplay(section){

for(i=0;i<section.length;i++){
    if(window.getComputedStyle(section[i]).display == 'grid'){
            if(i+1 == section.length){
                section[i].style.animation = 'fade-out 500ms'
                section[i].style.display = 'none'
                section[0].style.display ='grid'
                section[0].style.animation = 'fade-in 500ms'
                
                break;
            }
    }
}
}

The issue I'm facing is that only the last animation appears - the fade-in without preceding fade-out. Any suggestions?

javascripthtmlcss

Answer №1

In order to ensure the success of your transition, it is essential to wait for the animation to finish before setting display: none. This allows the transition to run smoothly without any interruptions.

To achieve this, you can apply the following code:
section[i].style.animation = 'fade-out 500ms';
setTimeout(() => {
  section[i].style.display = 'none';
  section[0].style.display ='grid';
  section[0].style.animation = 'fade-in 500ms';
}, 500);

An alternative method would be to set transition: opacity 500ms on your section element and adjust the opacity from 0 to 1 or vice versa. This approach helps maintain the consistency of the transition effect without potential glitches.

It is worth noting that using setTimeout(() => action, 500) may not always execute the action exactly after 500 milliseconds due to possible intervening code execution.

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

Hover over the div to center an SVG inside it

Simply put, I am working on a design where a gradient bar moves above a specific element when hovered, creating a visual effect of a triangle. I am now looking for a way to center an SVG inside the element on hover, to create a similar triangular gradient ...

javascriptjqueryhtmlcsssvg

Disabling data-scroll-speed on mobile devices

As a beginner in JavaScript/jQuery, I am working on incorporating code that changes the scrolling speed of specific elements on my webpage. However, I am struggling to disable this code for smaller screen widths. Here is the code snippet I have so far: &l ...

javascriptjquery

Using grid-template-areas in ReactJS function components does not function as expected

REMINDER: Check out and customize the code in CodeSandbox. This is a parent component with 5 children elements. Among them, 3 are React components and the remaining 2 are regular HTML buttons: import "./App.css"; import React from "react&qu ...

javascriptcssreactjs

Is it possible to show elements from an ngFor loop just once when dealing with a two-dimensional string array in a display?

I have an array of nested strings, and I am attempting to display the contents of each inner array in a table format. My goal is to have the first table show the values from the first index of each inner array and the second table to display the values fro ...

htmlangular

The reason for my inability to include a fresh method in String.prototype using typescript

I attempted to extend the String.prototype with a new method, but I encountered an issue. interface String { newMethod(): void } String.prototype.newMethod = function() {} Although there were no errors in the typescriptlang.org playground, I received ...

javascripttypescript

The error message "Element is not defined (Object.<anonymous>)" is occurring in the context of Intro.js-react, React, Next.js, and Tailwind

Here is a code snippet: import { useState } from 'react'; import { Steps } from 'intro.js-react'; export default function Dashboard() { const [stepEnabled, setStepEnabled] = useState(true); const steps = [ { intro: &apos ...

javascriptreactjstypescriptnext.jsintro.js

Is there a way to prevent HTML Tidy from inserting newlines before closing tags?

Have you ever noticed how HTML Tidy always seems to add an extra newline before the closing tag? It's so frustrating! For instance: <p>Some text</p> ends up looking like this: <p>Some text </p> Is there a way to make Tidy k ...

htmltexttidytext-formattinghtmltidy

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

firefoxcssshadow

Is Ruby on Rails featured in Designmodo's Startup Framework Kit?

I'm curious if the Startup Framework Kit from Designmodo can be seamlessly incorporated into my Ruby on Rails project. While I've had success integrating their Flat-UI-Pro using a gem, I haven't come across one for the Startup Framework yet. ...

javascripthtmlcssruby-on-railsframeworks

The impact of array splicing on data manipulation

I have a $scope array variable that I'm using to generate tabs on the front end, but I'm struggling with implementing a remove tab function. The code for removing tabs is as follows: function removeTab(index) { $scope.tabs.splice(index, 1); ...

javascriptangularjs

Utilizing Chrome Context Script plugin to monitor page changes: A step-by-step guide

Currently, I am in the process of creating a basic Chrome extension with the purpose of removing specific DOM elements from a particular website. In my manifest.json file: { "name": "example", "version": "1.0", "description": "example description" ...

javascriptgoogle-chrome-extensiondom-events

Deciphering the Cause of mapStateToPropsCall in Redux and React

When handling an unsuccessful http call resulting in an error message being displayed, I encounter subsequent state changes triggering multiple render calls. Is there a technique to identify the cause of these state changes and mapStateToProps calls? Alter ...

javascriptreactjsreduxreact-redux

Trouble updating Kendo DropDown in Internet Explorer

Having an issue with updating a Kendo DropDownList through a javascript function. It works fine in FireFox and Chrome, but not in Internet Explorer. @(Html.Kendo().DropDownList() .Name("myDDL") .HtmlAttributes(new { style = "width: 320px" }) . ...

javascriptjqueryinternet-explorerkendo-ui

What is the method for exiting full screen mode in NextJS?

'use client' const App = () => { const [isFScreen, setIsFScreen] = useState(false) useEffect(() => { const down = (e: KeyboardEvent) => { if (e.key === "Escape"){ setIsFScreen(false) } } docu ...

javascriptreactjsnext.js

There seems to be an issue with the on() function in jQuery when using mouseover

I am trying to implement a small popup box that appears when I hover over some text, but for some reason it's not working as expected. Can someone please help me troubleshoot this issue? My goal is to display the content from the "data-popup" attribut ...

jqueryhtmlcss

Utilizing AngularJS to bind data with labels and passing it in a form

I'm having trouble binding input data with label tags and using the same ng-model in a post method. Only one thing works at a time, and when I try to pass the label in the post method, it doesn't work. This issue is causing me difficulty in delet ...

jqueryhtmlangularjsangularjs-material

Maintaining fixed panels as you scroll through a centrally aligned layout

I am looking to create a layout with three divs set up as columns. The outer two will be for navigation and need to stay in place while the user scrolls, but the middle section will contain content that should scroll normally along with the page. I know t ...

css

Transform the words in a string into an array

I'm scratching my head trying to find a solution on Stack Overflow, but nothing seems like the right fit. Can anyone provide some guidance? I need a regex that will enable me to use JavaScript split to break a string into an array. The test case is: ...

javascriptregex

What is the best way to separate axios functions and components in Vue3?

In my opinion, it's more efficient to separate the axios commands from the vue components. This is how I structured my directories: src api - products.js components - Products.vue products.js import axios from 'axios'; const li ...

javascriptvue.jsaxiosvuejs3

Retrieve attributes of an html element modified by AJAX request

I am currently developing a small project that involves performing CRUD operations on a MySQL table using PHP and jQuery. The table is integrated into the layout in the following manner: <?php require '../connect.php'; $sql = "SELECT id ...

javascriptphpjquerymysqlajax