我正在尝试使用 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%);
}
}