延迟页面转换

时间:2016-05-18 16:46:52

标签: javascript jquery html css transition

由于smoothState.js因为某种原因从未为我工作过我自己的事情,只是更简单。

问题:如何延迟默认页面转换,以便在我的css动画结束后开始,pref。没有预加载其他页面,因为它将以fadeIn动画开始。我到目前为止。

jquery的

$(document).ready(function() {
$("a").click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  $(body).addClass("lightSpeedOut")(function(){
    window.location = href;
  });
});
});

html就在这里

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3 no-padding">
            <img src="img/t-cover.jpg" class="img-responsive-cover" alt="girl in a white top" />
            <div class="overlay">
                <h2>Tops & T-Shirts</h2>
                <p><a href="html/tops.html"> Enter the world of Isabel Marant, Alice and Olivia and more...</a></p>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

等待动画事件结束,然后重定向用户。

var ANIMATION_END = 'animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd';

$( 'body' ).addClass( 'lightSpeedOut' ).one( ANIMATION_END, function () {
    window.location = href;
} );