Show element for a second, then hide it

Question

I'm trying to show an element for a short amount of time, then hiding it with a CSS transition, on a button click.

Here's the outline of what I did.

1. elem has a property of opacity: 0.
2. Fire event when button gets selected.
3. The events function will add, then remove a class named show to elem.
4. CSS has the following property: transition: opacity 500ms ease 1000ms;.
5. #elem.show has a property of opacity: 1.

The problem is, nothing happens when the button gets clicked on. How can I make element get shown, without a transition effect, then, after 1s close with a transition?

JSFiddle

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.add('show');
  elem.classList.remove('show');
});

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
  transition: opacity 500ms ease 1000ms;
}
#elem.show {
  opacity: 1;
  transition: none;
}

<button id="btn">Press Me</button>
<div id="elem"></div>

Answer 1

Using setTimeout is not tidy - it is better to listen to the animation end event and remove the show class. I have also used animation to show and hide the element successively - see demo below:

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.remove('show');
  // this force-restarts the CSS animation
  void elem.offsetWidth;
  elem.classList.add('show');
});

elem.addEventListener("animationend", function(){
  elem.classList.remove('show');
}, false);

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
}
#elem.show {
  animation: anime 1s 1;
}
@keyframes anime {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<button id="btn">Press Me</button>
<div id="elem"></div>

---

Update

Listening to the animation-end event do not seem necessary actually - it works properly even without it. The gist here is the use of void elem.offsetWidth to forcefully restart the animation:

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');

btn.addEventListener('click', function() {
  elem.classList.remove('show');
  // this force-restarts the CSS animation
  void elem.offsetWidth;
  elem.classList.add('show');
});

#elem {
  background-color: orange;
  width: 100px;
  height: 100px;
  opacity: 0;
}
#elem.show {
  animation: anime 1s 1;
}
@keyframes anime {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<button id="btn">Press Me</button>
<div id="elem"></div>

Answer 2

just do this :

 setTimeout(function() { elem.classList.remove('show'); }, 1000);

instead of writing :

elem.classList.remove('show');

To handle repeated clicks, do this ::

var btn = document.getElementById('btn');
var elem = document.getElementById('elem');
var timeOutFunc;

btn.addEventListener('click', function() {
  elem.classList.add('show');
  clearTimeout(timeOutFunc);
  timeOutFunc = setTimeout(function() {elem.classList.remove('show') } , 1000);
});