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

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

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex delectus velit vero voluptatum fugiat quis, nobis beatae accusamus similique quod unde explicabo consequuntur, maxime labore natus non corporis ab odio.</p>
body {
  padding: 20px;
}

.thing {
  margin: 20px;
  padding: 20px;
  background: lightyellow;
  border: 1px solid green;
}
.thing2 {
  opacity: 0;
}
.m-fadeOut {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 300ms, opacity 300ms;
}
.m-fadeIn {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}
var tog = document.getElementById("tog");
var thing = document.getElementById("thing");
var thing2 = document.getElementById("thing2");

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.