Question

我看到一个不错的移动应用程序设计，真的很好奇我如何在现实中运行这种效果。让我用图片来解释......

所以，当页面加载时，它们会关闭。当我们想离开并访问下一页时，首先，他们会隐藏，然后他们会再次显示并喜欢这个...

编辑！
问题是，我如何设置休假活动的时间，我可以显示加载方式但是当我想访问下一页时，它会非常快，或者如果我理解正确，效果不显示..

my Main.js

$(document).ready(function () {
    $("div.top").addClass(" show");
    $("div.bottom").addClass(" show");
}); 

$(window).bind('beforeunload', function () {
    setTimeout(function () {
        $("div.top").removeClass(" show");
        $("div.bottom").removeClass(" show");
        $("div.top").addClass(" fade");
        $("div.bottom").addClass(" fade");
    }, 2000);
});

我的内容

<div class="loading">
    <div class="top">
        <h1>Logo</h1>
        <h3>Page one</h3>
    </div>
    <div class="bottom">

        <br>
        <a href="2.html">Next</a>
    </div>
</div>

我的样式表

.loading {
    position: relative;
    text-align: center;
    color: black;
}

.loading .top {
    background-color: white;
    position: fixed;
    min-width: 100%;
    min-height: 50vh;
    max-height: 50vh;
    top: -50vh;
    -webkit-transition: top ease .1s;
    transition: top ease .1s;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.23);
    z-index: 100;
}
.loading .bottom {
    background-color: #fedd30;
    background-image: url(bg-pattern.png);
    background-repeat: repeat-x;
    position: fixed;
    min-width: 100%;
    min-height: 50vh;
    max-height: 50vh;
    bottom: -50vh;
    -webkit-transition: bottom ease .1s;
    transition: bottom ease .1s;
}
.loading .top.fade {
    top: -500px;
    -webkit-transition: top ease .9s;
    transition: top ease .9s;
}
.loading .top.show {
    top: 0px;
    -webkit-transition: top ease .9s;
    transition: top ease .9s;
}
.loading .bottom.fade {
    bottom: -500px;
    -webkit-transition: bottom ease .9s;
    transition: bottom ease .9s;
}
.loading .bottom.show {
    bottom: 0px;
    -webkit-transition: bottom ease .9s;
    transition: bottom ease .9s;
}

Answer 1

但是我没有完全理解你的问题，但如果你想要加载的反向动画，比如this，你必须使用

event.preventDefault();

你可以通过增加过渡时间来改变动画的时间。

如果要在动画后将用户重定向到新页面，可以使用以下代码：

window.location.href = "http://stackoverflow.com";

如何设置休假页面事件的时间

1 个答案: