Fade_In_Then_Out

by greatCar

HTML

<div id="thing" class="thing fade">I toggle m-fadeOut</div>

<button id="tog">toggle them fancy classes</button>

CSS

.fade {
   opacity: 0.0;
   transition: opacity 0.8s ease;
   -moz-transition: opacity 0.8s ease;
   -webkit-transition: opacity 0.8s ease;
   }


      
      .thing {
  margin: 20px;
  padding: 20px;
  background: lightyellow;
  border: 1px solid green;
}

   .m-fadeIn {
      opacity: 1;
      }

JavaScript

tog.addEventListener("click", function() {
  
//thing2.classList.toggle("m-fadeOut");
 thing.classList.toggle("m-fadeIn");
  
});