如何实现幻灯片向上效果并重定向到另一个html页面

Question

当我点击一个按钮时，我想在我的页面上实现一个幻灯片效果。在CSS效果完成后，应该将我重定向到另一个页面(articles.html)。

目前，当我点击按钮，我只是重定向到文章页。我应该如何实现预期的结果？

​

$(document).ready(function() {

  $("#read-articles").click(function() {
    event.preventDefault();
    linkLocation = 'articles.html';
    $(".body").toggleClass("boom");
    redirectPage()

  });


  function redirectPage() {
    console.log('redirect fired');
    //window.location = linkLocation;
  }
});

.boom {
  transform: translateY(-100vw);
}

.body {
  border: 1px solid;
  height: 100px;
  transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="body">
  <div id="read-articles">boom</div>
</div>

​

Answer 1

您可以使用jQuery的slideUp()方法进行幻灯片，并使用它的回调函数在滑动完成后重定向。

​

$('#read-articles').on('click', function() {

  $('.elem').slideUp(300, function() {
    window.location = 'https://www.stackoverflow.com';
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis rutrum lorem. Fusce gravida rhoncus lectus quis vulputate. Morbi ornare ex mauris, non faucibus felis interdum vitae. Nullam faucibus lorem quis pretium consectetur. Pellentesque sed risus vitae neque tempor pulvinar. Phasellus porttitor augue vitae magna dapibus fermentum. Etiam id accumsan erat. Nunc molestie finibus lectus a viverra. Pellentesque id nisi ipsum. Proin vitae magna vel tortor varius consectetur. Morbi vitae dapibus nisl. Ut nec ipsum vel quam imperdiet sodales. Duis ut iaculis enim, ac congue felis. Vestibulum egestas posuere quam, non euismod arcu mollis a. Suspendisse vel dictum neque. Fusce nec libero leo.
</div>

<button id="read-articles">Read</button>

​