Animate the CSS with a delay using styled-components

Question

Animate the CSS with a delay using styled-components

Is it possible to delay the opacity to zero when a certain condition is met? The loader bar is controlled using JavaScript, but can this delay be achieved using CSS alone?

const Wrap = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
`;

Check out the demo (click on the add button)

https://codesandbox.io/s/7k20zw5z10

My goal is to have the progress bar load to 100%, then delay for 1 second before fading away completely.

javascript css reactjs

Answer 1

Answer №1

Absolutely, you can achieve this effect using CSS transitions:

div {
  background: #f1f1f1;
  width: 120px;
  height: 15px;
  border-radius: 5px;
  opacity: 1;
  transition: opacity 0.5s 1s;
}

div:hover {
  opacity: 0;
}

<div></div>

The transition will last for 0.5s with a 1s delay before it starts.

Answer 2

Absolutely, you can achieve this effect using CSS transitions:

div {
  background: #f1f1f1;
  width: 120px;
  height: 15px;
  border-radius: 5px;
  opacity: 1;
  transition: opacity 0.5s 1s;
}

div:hover {
  opacity: 0;
}

<div></div>

The transition will last for 0.5s with a 1s delay before it starts.

Answer 3

Answer №2

One way to achieve this effect is by using the transition-delay property in CSS:

const Wrapper = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
  transition-delay: 2s;
`;

Check out the demo here: https://codesandbox.io/s/mq51n0jmrp

Answer 4

One way to achieve this effect is by using the transition-delay property in CSS:

const Wrapper = styled.div`
  background: #ddd;
  width: 100px;
  height: 10px;
  border-radius: 3px;
  opacity: ${props => (props.currentStep === props.steps ? 0 : 1)};
  transition-delay: 2s;
`;

Check out the demo here: https://codesandbox.io/s/mq51n0jmrp

Animate the CSS with a delay using styled-components

Answer №1

Answer №2

Similar questions

Using an if statement to run a script in Npm

Turned off jquery on a specific div in order to resolve compatibility problems with Vue.js

Looking for a reliable CSS aggregator for .Net that can merge and minimize style sheets effectively?

The JQuery CSS function is unable to alter the height of the element

Unable to get the sublocality dropdown list to cascade properly in asp.net mvc

Ways to update component state using local storage data prior to rendering the component

The map fails to load on the HTML page

Is my React-Redux state failing to update properly due to potential mutation of reducer arguments?

Alter the background color of a div contingent on the checkbox being checked within

An incorrect object was removed from the array

What is the best way to extract text from a list item in an unordered list (

Checking the list box and radio button using JavaScript based on their respective IDs

jQuery Filter for Page Content - choose specific text within paragraphs and clickable links

When attempting to evaluate JSON data on a specific computer, the function JSON

Issues with React's onSelect event functionality are persisting

Altering the placement of a single element from floating to fixed positioning in CSS

Is it possible to string together requests in a Vue method?

Before the async function, make sure to set the value using React's useState

Bluebird Enthusiastically Predicting the Outcome of a Complex Operation

How can we rearrange the newly added row from onRowAdd in Material Table to be displayed at the beginning of the section?