I have an issue with my project.

I have this code to make disappear my div :

@keyframes hideAnimation {
  to {
    visibility: hidden;
  }
}

On my div I do this animation to make disappear my div after 6 seconds

.env{
  animation: hideAnimation 0s ease-in 6s;
  animation-fill-mode: forwards;
}

My issue is : I want to create a button to reappear my div

The div disappear automatically after 6 seconds and the user can make reappear the div with a click on a button.

I don't know how to do that.

I think I will use JS or jQuery but I'm lost. Can someone can help me ?

CodePudding user response：

If your goal is to fade in/out the div then keyframes is overkill. You can use transition with opacity instead.

const div = document.querySelector('div');

document.querySelector('button').addEventListener('click', e => {
  div.classList.toggle('show');
});

div { 
  opacity: 0;
  transition: opacity 1s;
} 

div.show {
  opacity: 1;
} 

<button>Toggle div</button>
<div>Lorem ipsum dolor sit</div>

CodePudding user response：

So, you need the button on click to get the div you want to reappear, and set its visibility: visible;

For example

button.addEventListener('click', () => {
  document.querySelector('.env').style.visibility = 'visible';
})

For more resources

1. addEventListener
2. querySelector
3. HTMLElement style
4. Visibility