Barba.js для переходов страниц Ошибка: «неудачная попытка состояния push» - PullRequest
Новая
       20

Barba.js для переходов страниц Ошибка: «неудачная попытка состояния push»

3 голосов
/ 25 марта 2019

Я экспериментирую с Barba.js для переходов страниц.Когда я пытаюсь запустить этот код, я получаю сообщение об ошибке «Заблокированная попытка использовать history.pushState () для изменения URL истории сеанса».Я считаю, что это связано с DOM.Я новичок в JS, любая помощь будет принята с благодарностью.Ниже я приложил код.Спасибо!

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%);
  }
}

1 Ответ

0 голосов
/ 26 марта 2019

Обязательно запустите свой код с помощью веб-сервера, иначе вы не сможете использовать push-состояние.

...