How to delay a hyperlink until a CSS animation ends?


Tags: jquery,css,jquery-animate,css-animations

Problem :

I'm trying to get the anchor tag to redirect as soon as the CSS animation ends. I tried capturing the href in jQuery and using 'setTimeout' to cause a delay before going to the anchor location (this is what was recommended in previous threads), but it hasn't been working.

$(document).ready(function() {

  $('.section').click(function() {

    var goTo = this.getAttribute("href"); //HOLDS HREF

    var $elementA = $('.section').bind('webkitAnimationEnd', function() //ANIMATION BEGIN
      {
        $(this).removeClass('clicked');
      });

    var $elementB = $('.section').bind('animationend', function() {
      $(this).removeClass('clicked');
    });

    $('.section').click(function() {
      $(this).addClass('clicked'); //ANMATION END
    });

    setTimeout(function() { //SUPPOSED TO DELAY LINK
      window.location = goTo;
    }, 300);
  });
});
a {
  overflow: hidden;
}

.section {
  background-color: teal;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}

.response {
  position: relative;
  top: 75px;
  left: 80px;
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background-color: #f5f5f5;
  transition: .05s ease-out;
  opacity: 0;
}

.clicked {
  animation: event 1.4s;
}

.clicked > .response {
  animation: response 1.6s;
}

@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}

@keyframes response {
  0% {}
  16% {
    opacity: .7;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(10);
  }
  100% {
    opacity: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="section">
  <div class="response"></div>
</a>



Solution :

The issue is because the request is sent to load the new page immediately, hence the current UI is unloaded straight away with few further updates. To get around this you can stop the default behaviour of the link using preventDefault() and then make the request for the next page manually after the animation ends, like this:

$(document).ready(function() {
  $('.section').click(function(e) {
    e.preventDefault();
    var $a = $(this).addClass('clicked');
    setTimeout(function() {
      window.location.assign($a.attr('href'));
    }, 300);
  });
});
a {
  overflow: hidden;
}
.section {
  background-color: teal;
  position: absolute;
  width: 200px;
  height: 200px;
  box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, .4);
}
.response {
  position: relative;
  top: 75px;
  left: 80px;
  width: 40px;
  height: 40px;
  border-radius: 500px;
  background-color: #f5f5f5;
  transition: .05s ease-out;
  opacity: 0;
}
.clicked {
  animation: event 1.4s;
}
.clicked > .response {
  animation: response 1.6s;
}
@keyframes event {
  0% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
  20% {
    box-shadow: 0px 9px 14px 0px rgba(50, 50, 50, 0.6);
  }
  100% {
    box-shadow: 0px 3px 3px 0px rgba(50, 50, 50, 0.4);
  }
}
@keyframes response {
  0% {} 16% {
    opacity: .7;
  }
  32% {
    opacity: 0;
  }
  40% {
    opacity: 0;
    transform: scale(10);
  }
  100% {
    opacity: 0;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com" class="section">
  <div class="response"></div>
</a>


    CSS Howto..

    How can I programmatically position multiple backgrounds using Sass/Compass?

    How to prevent span from growing with content

    How do I position this image using CSS so it overlaps a div but displays inline?

    How to get this specific responsive nav?

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    How to make specific line cut-off points without using
    breaks because it fails responsive design

    How to implement image sticker (ribbon) with css3

    Ascii character codes shown as text in browser [duplicate]

    How to generate CSS markup for non-designers

    How to align an image on css?

    How to change CSS property in Magnific Popup

    How to set min-height for bootstrap container

    How to change MenuItem focus/hover color

    How to test a web designer on css layouts?

    How to have 2+ boxes slide down

    How do you maintain CSS layout when adding content (ASP.NET)

    How to align 2 content blocks horizontally in css without using s
    If you can change your markup, just one line of CSS is enough to achieve this through flexbox. Wrap both the items inside a parent container. Set display: flex to...
    Read more

    How to Make Tabs In CSS?

    How to link my css, js and image file link in django

    How to convert simple navigation to include drop down menus? (Specific situation - have tried conversion)

    How stop elements from moving

    jquery width toggle animation is showing vertical cells during animation takes place

    How to format XML file with CSS?

    How to style a “list item > link” in jquery mobile

    How to overlap auto-scaling images with an auto-scaling background

    How to ensure dynamic CSS is loaded first before AJAX content?

    How to hide overflow characters of a div when resizing [duplicate]

    How to make a div fill the remaning vertical space using css

    How to create a border that fully covers the adjacent corners in CSS?

    Menu hover effect - how to reproduce this effect?

    s
    How to make the whole div clickable
    (CSS-Javascript-Jquery) How to make thumbnails slider for a carousel? [closed]
    How to override Zurb Foundation css properties using rails 3.1?
    How to select a css class as selected dynamically in mvc
    zindex + jquery: How to make my menu appear over the jquery script?
    how to create a image slider with help of only HTML and CSS?
    How to modify twitter widget in css
    How to give different views for same url for different devices with same resolution?
    CSS : How to remove margin between
  • How to hide the first two div using css?
    How to dynamically remove all unwanted CSS and JS from page
    How to add different CSS to the same HTML tags?
    How to get 3 div's side by side under an angle
    how to include absolute css path using add_editor_style() in wordpress
    Twitter Bootstrap 3 - how to properly replace glypicons with custom made icons?
    CSS - how to overwrite using CSS?
    How to render CSS and HTML elements back to the Client's Browser from Form-POST acction and JavaScript?
    How to specify height using fancybox 2.1.4
    How can I keep the progress bar number value centered and on top?
    How do I make an image resize inside a div that is resizing to a percentage of a parent div?
    CSS How to use margins with different divs
    How to give shadow to a border
    How to scale jumbotron bootstrap on larger monitors?
    Only partial image showing as my background image. How can I use CSS to get the full image as my background?
    How do I position the search box to my specs?
    How to override css attribute-only style
    How to programmatically apply CSS definitions to the whole page?
    How can I make a table column width somewhat similar automatically?
    How to set css to more selectors when one of it is $(this)?