延迟页面转换

Question

因为 smoothState.js 由于某种原因我从来没有为我工作过，所以我尝试自己做一些事情，只是更简单。

问题：如何延迟默认页面转换，使其在我的 css 动画结束后开始，pref。不预加载其他页面，因为它将以淡入动画开始。我就这么远了。

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>

Answer 1

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

var ANIMATION_END = 'animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd';

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

延迟页面转换

Delaying page transitioning

html

javascript

css

jquery

transition