Question

我已经构建了一个我希望构建的单页网站的“模型”。按下菜单项，网站向下或向上滑动到所请求的页面。

我通过将整个内容放在包装器中来实现这一点，使用css动画上下滑动，然后使用javascript更改动画，具体取决于从哪里滑动到。

但是我遇到了这个问题，当按下菜单项时，页面会在进行动画之前快速“闪烁”到首页。

我的代码如下所示：

的index.php：

<body>

<div id="menu">
<div id="menu-ele" onclick="slide_page('p1');">P1</div>
<div id="menu-ele" onclick="slide_page('p2');">P2</div>
<div id="menu-ele" onclick="slide_page('p3');">P3</div>
<div id="menu-ele" onclick="slide_page('p4');">P4</div>
</div>

<div id="wrapper">
<div id="page1">
<div id="page-titel">Page 1</div>
</div>
<div id="page2">
<div id="page-titel">Page 2</div>
</div>
<div id="page3">
<div id="page-titel">Page 3</div>
</div>
<div id="page4">
<div id="page-titel">Page 4</div>
</div>
</div>

</body>

的CSS：

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#menu {
    width: 600px;
    height: 70px;
    background-color: #97B6C7;
    border-bottom: 4px solid #324456;
    border-left: 4px solid #324456;
    float: right;
    border-radius: 0 0 0 8px;
}

#menu-ele {
    width: 110px;
    height: 30px;
    padding: 20px;
    color: #19284B;
    font-family: Trebuchet;
    font-size: 18px;
    text-align: center;
    float: left;
    cursor: pointer;
}

#menu-ele:hover {
    color: #FBFBFB; 
}


#wrapper {
    width: 100%;
    height: 100%;
    -webkit-animation-name: wrapper-slide;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
    top: 0;
    position:absolute;
    z-index: -1;
}

@-webkit-keyframes wrapper-slide {
}

#page1 {
    width: 100%;
    height: 100%;
    background-color: #C0595B;
}
#page2 {
    width: 100%;
    height: 100%;
    background-color: #BCA7A8;
}
#page3 {
    width: 100%;
    height: 100%;
    background-color: #49677A;
}
#page4 {
    width: 100%;
    height: 100%;
    background-color: #C0A27B;
}

#page-titel {
    width: 500px;
    height: 60px;
    font-family: Trebuchet MS;
    font-size: 60px;
    text-align: center;
    margin: 0 auto;
    padding-top: 25%;
}

JS：

function findWebkitRule(rule) {
    var ss = document.styleSheets;

    for (var i = 0; i < ss.length; ++i) {

        for (var j = 0; j < ss[i].cssRules.length; ++j) {

            if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule) {
                return ss[i].cssRules[j];
            }
        }
    }

    return null;
}


function change(anim, from, to) {

    var keyframes = findWebkitRule(anim);

    keyframes.deleteRule("0%");
    keyframes.deleteRule("100%");

    keyframes.insertRule("0% { top: " + from + "px; }");
    keyframes.insertRule("100% { top: " + to + "%; }");

    document.getElementById("wrapper").style.webkitAnimationName = anim;
    document.getElementById("wrapper").style.webkitAnimationPlayState = "running";
}


function slide_page(page) {
    var end = 0;

    if (page == "p1") {
        end = 0;
    }
    if (page == "p2") {
        end = -100;
    }
    if (page == "p3") {
        end = -200;
    }
    if (page == "p4") {
        end = -300;
    }

    var topValue = document.getElementById("wrapper").offsetTop;

    document.getElementById("wrapper").style.webkitAnimationName = "none";
    document.getElementById("wrapper").style.webkitAnimationPlayState = "paused";

    setTimeout(function(){
        change("wrapper-slide", topValue, end);
    }, 300); // <- I set this one to 300, so the flashing problem is demonstrated clearer

}

在这个例子中，我将setTimeout设置为300，så问题清楚地表明了。通常情况下这将是0，但你仍然可以非常快速地闪光。

Answer 1

You can use the following snippet to convert it into a SPA.

This works in any size.
Header stays fixed.
Body shows only one frame at a time.
More important, no flickering!

$(document).ready(function () {
  $(".page").css({
    height: $(window).height(),
    lineHeight: $(window).height() + "px"
  });
  $("nav a").click(function () {
    theHref = $(this).attr("href");
    $("html, body").animate({
      scrollTop: $(theHref).offset().top
    }, 500);
    return false;
  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
a {color: #33f; text-decoration: none;}

body {overflow: hidden;}

header {position: fixed; right: 0; top: 0;}
header nav ul {padding: 5px; background: #ccf; border-radius: 0px 0px 0px 5px;}
header nav ul li {display: inline-block;}
header nav ul li a {display: block; padding: 5px; border-radius: 5px;}
header nav ul li a:hover {background-color: #99f; color: #fff;}

.page {text-align: center;}
#page-1 {background: #99f;}
#page-2 {background: #9f9;}
#page-3 {background: #f99;}
#page-4 {background: #9cf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li><a href="#page-1">Page 1</a></li>
      <li><a href="#page-2">Page 2</a></li>
      <li><a href="#page-3">Page 3</a></li>
      <li><a href="#page-4">Page 4</a></li>
    </ul>
  </nav>
</header>
<section>
  <div class="page" id="page-1">Page 1</div>
  <div class="page" id="page-2">Page 2</div>
  <div class="page" id="page-3">Page 3</div>
  <div class="page" id="page-4">Page 4</div>
</section>

JSBin: http://jsbin.com/rekobofami，http://output.jsbin.com/rekobofami

Answer 2

试试这个。使用jquery animate滑动到相关页面。

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function slide_page(page) {
    $('html, body').animate({
        scrollTop: $('#'+page).offset().top
    }, 2000);
}
</script>
<style>
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#menu {
    width: 600px;
    height: 70px;
    background-color: #97B6C7;
    border-bottom: 4px solid #324456;
    border-left: 4px solid #324456;
    float: right;
    border-radius: 0 0 0 8px;           
}

#menu-ele {
    width: 110px;
    height: 30px;
    padding: 20px;
    color: #19284B;
    font-family: Trebuchet;
    font-size: 18px;
    text-align: center;
    float: left;
    cursor: pointer;
}

#menu-ele:hover {
    color: #FBFBFB; 
}


#wrapper {
    width: 100%;
    height: 100%;
    -webkit-animation-name: wrapper-slide;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: paused;
    top: 0;
    position:absolute;
    z-index: -1;
}

@-webkit-keyframes wrapper-slide {
}

#page1 {
    width: 100%;
    height: 100%;
    background-color: #C0595B;
}
#page2 {
    width: 100%;
    height: 100%;
    background-color: #BCA7A8;
}
#page3 {
    width: 100%;
    height: 100%;
    background-color: #49677A;
}
#page4 {
    width: 100%;
    height: 100%;
    background-color: #C0A27B;
}

#page-titel {
    width: 500px;
    height: 60px;
    font-family: Trebuchet MS;
    font-size: 60px;
    text-align: center;
    margin: 0 auto;
    padding-top: 25%;
}
</style>
</head>
<body>

<div id="menu">
<div id="menu-ele" onclick="slide_page('page1');">P1</div>
<div id="menu-ele" onclick="slide_page('page2');">P2</div>
<div id="menu-ele" onclick="slide_page('page3');">P3</div>
<div id="menu-ele" onclick="slide_page('page4');">P4</div>
</div>

<div id="wrapper">
<div id="page1">
<div id="page-titel">Page 1</div>
</div>
<div id="page2">
<div id="page-titel">Page 2</div>
</div>
<div id="page3">
<div id="page-titel">Page 3</div>
</div>
<div id="page4">
<div id="page-titel">Page 4</div>
</div>
</div>

</body>
</html>

在滑动之前，单页网站会闪烁到第1页

2 个答案: