如何延迟超链接直到CSS动画结束？ [英] How to delay a hyperlink until a CSS animation ends?

问题描述

我想在CSS动画结束后立即重定向锚标记。我尝试在jQuery中捕获href并使用'setTimeout'在进入锚点之前导致延迟（这是以前的线程中推荐的），但它没有工作。

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>

推荐答案

问题是因为请求被发送以立即加载新页面，因此当前的UI会立即卸载，只需要进一步更新。要解决此问题，您可以使用 preventDefault（）停止链接的默认行为，然后在动画结束后手动请求下一页，如下所示：

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动画结束？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！