Vaggelis Kolimitras Vaggelis Kolimitras - 5 months ago 12
Javascript Question

How to first fade out an element and then go to another page?

I would like a little help! My question is how can I click an element let's say a button than has a

href
attribute to another page. When I press the button I want an animation to happen to the whole page and then move to another page! Could someone upload a snippets of the code so to see how we achieve this?

Answer

You may use the CSS @keyframes to define an animation and then using the animationend event you may change to another page:

window.onload = function () {
  var view_port = document.getElementsByClassName('view_port')[0];
  var element = document.getElementById("logoutAnimation");
  
  // listen on animationend
  element.addEventListener("animationend", function () {
    // remove animation elements
    view_port.style.visibility =  'hidden';
    
    // do logout.....
    window.location = "https://github.com/"
  }, false);
  
  // hide animation element on start up
  view_port.style.visibility =  'hidden';
  document.getElementById('startAnimation').addEventListener('click', function(e) {
    
    view_port.style.visibility =  'visible';
    
    // start animation
    element.className  += 'cylon_eye';
  }, false);
}
.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75%);
  color: white;
  height: 100%;
  width: 20%;
  -webkit-animation: 2s linear 0s 2 alternate move_eye;
  -moz-animation: 2s linear 0s 2 alternate move_eye;
  -o-animation: 2s linear 0s 2 alternate move_eye;
  animation: 2s linear 0s 2 alternate move_eye;
}

@-webkit-keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

@-moz-keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

@-o-keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

@keyframes move_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
<div class="view_port">
    <div class="polling_message">
        Logging out....
    </div>
    <div id="logoutAnimation"></div>
</div>
<button id="startAnimation">Start Animation and Logout</button>

Comments