html - 使用 smoothState.js 链接不会指向二级页面

问题描述

我正在尝试使 smoothState.js 插件工作。单击从 index.html 到 secondary.html 的链接后，动画会产生反向但不会导致 secondary.html，实际上保持在同一屏幕上。

在这里，您将找到在 codepen 上上传的小示例： https ://codepen.io/vizzale/project/editor/DPkyBr

这里是代码：

(index.html)

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>smooth</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <main>
    <section id="cover" class="scene">
      <div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:100vh;background-color:red;z-index:100;"></div>
      <a href="secondary.html" style="position:absolute;color:white;z-index:200;">link page</a>
    </section>

    <section style="width:100vw;height:20vh;background-color:grey;"></section>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="jquery.smoothState.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

(secondary.html)

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>smooth</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <main>
    <section id="cover" class="scene">
      <div class="scene_element -fadeindown" style="position:absolute;width:100vw;height:30vh;background-color:red;z-index:100;"></div>
      <a href="index.html" style="position:absolute;color:white;z-index:200;">link page</a>
    </section>
  </main>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="jquery.smoothState.min.js"></script>
  <script src="main.js"></script>
</body>

</html>

(JavaScript)

$(function() {
  'use strict';
  var $page = $('#cover'),
    options = {
      debug: true,
      prefetch: true,
      cacheLength: 2,
      forms: 'form',
      onStart: {
        duration: 700, // Duration of our animation
        render: function($container) {
          // Add your CSS animation reversing class
          $container.addClass('is-exiting');
          // Restart your animation
          smoothState.restartCSSAnimations();
        }
      },
      onReady: {
        duration: 0,
        render: function($container, $newContent) {
          // Remove your CSS animation reversing class
          $container.removeClass('is-exiting');
          // Inject the new content
          $container.html($newContent);
        }
      }
    },
    smoothState = $page.smoothState(options).data('smoothState');
});

(CSS)

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  color: #000;
  background: #fff;
  will-change: auto;
  overflow-x: hidden;
}

a, a:link, a:hover, a:active, a:visited {
  color: #000;
  text-decoration: none;
}

#cover {
  height: 100vh;
}


@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0.6;
    -webkit-transform: translate3d(0, -100vh, 0);
    transform: translate3d(0, -100vh, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0.6;
    -webkit-transform: translate3d(0, -100vh, 0);
    transform: translate3d(0, -100vh, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.scene .scene_element {
  -webkit-animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  animation: 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scene .-fadeindown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

.scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
}

标签： htmlcsssmoothstate.js

html - 使用 smoothState.js 链接不会指向二级页面

问题描述

解决方案

推荐阅读