JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="wrapper">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras interdum nunc maximus dolor rhoncus, pulvinar pellentesque libero feugiat. Maecenas tempus ipsum in dictum sagittis. Vivamus venenatis dolor lectus, at maximus neque pharetra eu. Etiam at justo eu massa mollis pulvinar. Proin iaculis, libero vitae aliquam placerat, diam quam posuere leo, sit amet tincidunt diam metus vel lacus. Duis eu porttitor libero. Duis ornare elit in elementum sollicitudin. Fusce vehicula non sem quis porta. Sed quis tellus in felis consectetur dignissim. Aenean vestibulum risus aliquet ex feugiat, nec mattis elit ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque consequat, purus nec vulputate pulvinar, augue nisl aliquam magna, id tincidunt risus ligula a metus.</p>
    <a href="//arenago.axiell.com/">Test link</a>
</div>

CSS

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}
#wrapper {
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}
#wrapper.fadeOut {
    animation-duration: 1s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

JavaScript

jQuery(window).on('hashchange', function(e){
    jQuery("#wrapper").addClass('fadeOut');
    jQuery("#page-loader").toggle();
});