CODEWITHSUNDEEP
javascriptcss
user8463989
user8463989

Reputation: 2459

Can't get css fade in triggered by javascript to fade in

I want to fade in an error message if there is one by adding a class to a div. The error message does show up currently but it doesn't fade in.

Here is the html. This is just an empty div and the error class doesn't actually contain any styling.

<div class="error"></div>

This is the javascript which triggers the displaying of the error message:

  const showError = document.querySelector('.error');
  showError.classList.add("error-message-fade-in");
  showError.innerHTML = errorMessages;

And here is the css:

  .error-message-fade-in {
    opacity: 1;
    transition: opacity 1000ms;
    color: #de5959;
    background-color: #ffe9e9;
    padding: 20px 26px;
  }

Upvotes: 0

Views: 147

Answers (2)

Harshad Prajapati
Harshad Prajapati

Reputation: 255

here link of JS Fiddle of solution

  • set the initialize opacity 0 to .error

Upvotes: 0

IvanS95
IvanS95

Reputation: 5742

This should be working fine, just make sure you have set the properties needed for the transition to actually take effect. Set the initial opacity of the div as 0, this will make the element invisible, and add the transition time as well; after that you just have to add the class with the opacity: 1, and the transition will happen.

function fadeError() {
  const showError = document.querySelector('.error');
  showError.classList.add("error-message-fade-in");
  showError.innerHTML = 'Error';

}
.error {
  opacity: 0;
  transition: all 0.5s;
}

.error-message-fade-in {
  opacity: 1;
  transition: opacity 1000ms;
  color: #de5959;
  background-color: #ffe9e9;
  padding: 20px 26px;
}
<div class="error"></div>

<button type="button" onclick="fadeError()">Fade</button>

Upvotes: 1

Related Questions