CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jerry
Jerry

Reputation: 1089

Create a second css transition before next page loads

Im using css transitions to show animated lines on pageload. To initiate the lines Im using a jquery script to change class on the line elements.

I would like to reverse the CSS transitions when I load the next page. On pageload the lines draw up - for next page I want them to draw out before the next page draw them in again. I guess I would need to Load the pages with something like ajax to get a seamless transition between pages to start with?

Demo: https://d157rqmxrxj6ey.cloudfront.net/jerryskate/8667/

HTML: 

<html lang="en" class="noTouch">
 <!-- META DATA -->
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">



 <body class="page-ready">
 <link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
  <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<script src="transitions.js"></script>


<main class="main wrapper js-pageTransition">


<li class="col--xs--6 projectThumb">
  <a href="page1.html">

    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page1</h3>
        </div>
      </div>
    </figure>
  </a>
</li>


<li class="col--xs--6 projectThumb">
  <a href="page2.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page2</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page3.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page3</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page4.html">
    <figure>

      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page4</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page5.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page5</h3>
        </div>
      </div>
    </figure>
  </a>
</li>
<li class="col--xs--6 projectThumb">
  <a href="page6.html">
    <figure>


      <div class="projectThumb__info">
        <div>
          <h3 class="h2 project-title">page6</h3>
        </div>
      </div>
    </figure>
  </a>
</li>


 <span class="menu-mask"></span>
 <span class="h-line h-line--1"></span>
 <span class="h-line h-line--2"></span>
 <span class="h-line h-line--3"></span>

 <span class="v-line v-line--left"></span>
 <span class="v-line v-line--middle"></span>
 <span class="v-line v-line--right"></span>

CSS: 

.h-line {
 position: absolute;
 z-index: -1;
 width: 0%;
 height: 5px;
 right: 0;
 background-color: #EDEDED;
 transition: right 1.5s linear;
 }
.h-line--1 {
 top: 400px;
 transition-delay: 2s;
 }
 .h-line--2 {
 top: 800px;
 transition-delay: 3s;
 }
 .h-line--3 {
 top: 600px;
 transition-delay: 4s;
 }
.h-line--4 {
 top: 1600px;
 transition-delay: 4s;
 }
 .h-line--5 {
  top: 1800px;
  transition-delay: 4s;
 }
 .h-line--6 {
 top: 2200px;
 transition-delay: 4s;
 }
 .v-line {
 position: fixed;
 z-index: -1;
 width: 5px;
 height: 0%;
 background-color: #EDEDED;
 bottom: 100%;
 transition: bottom 1.5s linear;
 }
.page-ready .v-line { bottom: 0 }
.v-line--left {
 left: 58%;
 transition-delay: 1s;
 }
.v-line--middle {
 left: 84%;
 transition-delay: 2s;
 }
.v-line--right {
 left: 95%;
 transition-delay: 2.4s;
 }
.h-line {
 width: 0!important;
 transition: width 1.5s linear!important;
 }
.h-line.h-line--2.ready { transition: width 3s linear!important }
 span.h-line.h-line--2.ready{
 width: 100%!important;
 transition: width 1.5s linear!important;
 left: 0!important;
 right: initial!important;
 }
.h-line.ready { width: 100%!important }
span.v-line.v-line--left.ready {
height: 100%!important;
transition: height 1.5s linear!important;
bottom: 0!important;
top: initial!important;
}

span.h-line.h-line--1.ready {
width: 100%!important;
transition: width 1.5s linear!important;
}
span.v-line.v-line--middle.ready {
  height: 100%!important;
  transition: height 1.5s linear!important;
  bottom: 0!important;
  top: initial!important;
 }
span.v-line.v-line--right.ready {
  height: 100%!important;
  transition: height 1.5s linear!important;
  bottom: 0!important;
  top: initial!important;
  }

 span.v-line.v-line--left.ready {
 height: 100%!important;
 transition: height 1.5s linear!important;
  bottom: 0!important;
  top: initial!important;
  }
  span.h-line.h-line--3.ready {
  width: 100%!important;
  transition: width 1.5s linear!important;
   left: 0!important;
   right: initial!important;
   }
  .h-line.h-line--3.ready {
  transition: width 3s linear!important;
  }

Script: 

$(function () {
$('.v-line, .h-line').addClass('ready');
});

Upvotes: 0

Views: 421

Answers (2)

Udesh
Udesh

Reputation: 2071

This solution uses Event Delegation. In this case Jquery captures the click on the element then removes the CSS class.

If you use the code below when the user clicks, the animation will play in reverse and the page will change. Although the page change interrupts the animation.

Goto your page, paste the code below into the browser console and then click a link to see it work.

$("body").on("click","a",function( event ){ 
$('.v-line, .h-line').removeClass('ready');});

In order for you to allow the whole CSS animation to complete before changing pages you may need to use Event Prevent Default. This function stops the original click from occurring. This means you'll need to fire the event manually after the animation is complete.

Goto your page, paste the code below into the browser console and then click a link to see it work.

Please note since the default behaviour is prevented the page does not change, but the animation now has enough time to complete.

$( "body" ).on( "click", "a", function( event ) {
event.preventDefault();
$('.v-line, .h-line').removeClass('ready');});

Upvotes: 0

hexa heart
hexa heart

Reputation: 181

You can use the transitionend event, there is fired when a CSS transition has completed.

You have also to prevent the navigation when clicking on the link.

//Add listener on <a> nodes
$('a').click(function(e){
    //cancel the navigation.
    e.preventDefault(); 

    //take a reference of the clicked link
    var linkNode = this;

    $('.v-line, .h-line')
        //remove the classe (you have also to add reverse transition)
        .removeClass('ready')

        //add the "transitionend" event.
        .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   
            function(e) {
                //navigate to the href on clicked link.
                document.location.replace( linkNode.href );
            }
        );
);

About a seamless transition, yes you couldn't avoid it if you load a new page, ajax is a good way to update the needed content of your page without a complete reload.

Upvotes: 1

Related Questions