用于页面转换的Barba.js错误：“推送状态尝试失败”

Question

I am experimenting Barba.js for page transitions. When I try to run this code I get a "Blocked attempt to use history.pushState() to change session history URL" error message. I believe it has to do with the DOM. I am a JS newbie, any help would be greatly appreciated. Below I have attached the code. Thanks!

HTML:

  <div id="barba-wrapper">
    <div class="barba-container">

  <div class="page1">
    <h1>Welcome to Homepage</h1>
    <a href="about/index.html">About</a>
  </div>
 </div>
</div>

HTML:

  <div id="barba-wrapper">
    <div class="barba-container">

  <div class="page2">
    <h1>Welcome to About</h1>
    <a href="../index.html">Home</a>
  </div>
  </div>
 </div>

JS:

Barba.Pjax.start();


var FadeTransition = Barba.BaseTransition.extend({
  start: function() {

Promise
  .all([this.newContainerLoading, this.fadeOut()])
  .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {

  },

  fadeIn: function() {
this.newContainer.classList.add("slide-in"); //ABOUT

var that = this;

this.newContainer.addEventListener("animationend", function(){
  that.newContainer.classList.remove("slide-in");
  that.done();
    });
  }
});



Barba.Pjax.getTransition = function() {

  return FadeTransition;
};

CSS:

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body
{
  font-family: sans-serif;
  overflow: hidden;
}
.page1,
.page2
 {
 height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  width: 100%;
  flex-direction: column;
  position: absolute;
}
a{
  color: white;
  text-decoration: none;
  margin-top: 50px;
  border: 1px solid white;
  padding: 10px 30px;
}
.page1
{
  background-color: rgb(129, 60, 146);
}
.page2
{
  background-color: rgb(73, 60, 146);
}

.slide-in
{
  animation: slide-in 0.5s ease forwards;
}

@keyframes  slide-in
{
  from
  {
    transform: translateX(100%);
    visibility: visible;
  }
  to
  {
    transform: translateX(0%);
  }
}

Answer 1

确保使用Web服务器运行代码，否则无法使用推送状态。