如何解决Swup 单击不同按钮时更改动画
我正在尝试从 main-swup 更改动画。例如,当我点击第一个按钮时,页面之间的动画应该从左到右变化,当我点击另一个按钮时,它应该以另一种方式动画。
在 index.html 中:
<main id="swup" class="transition-rtl">
<h1>Home page here</h1>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Accusamus aliquam blanditiis,dolor eligendi minus
molestiae molestias natus necessitatibus obcaecati recusandae similique suscipit. Ab accusamus consequuntur
corporis ducimus eveniet SAEpe voluptatum.</p>
<a href="/vitters.com/subpage.html" id="swup-ltr" data-direction="ltr">Subpage LTR</a>
<a href="/vitters.com/subpage.html" id="swup-rtl" data-direction="rtl">Subpage RTL</a>
</main>
在 main.js 中:
const options = {
plugins: [new SwupBodyClassplugin()],animateHistorybrowsing: true
};
const swup = new Swup(options);
let scrollValues = {};
swup.on('clickLink',event=>{
const direction = event.path[0].id;
if(direction == 'ltr'){
//Now the new page should slide in from left
} else{
//the page should slide in from right
}
})
style.css
.transition-ltr,.transition-rtl{
transition: .4s;
opacity: 1;
}
.transition-ltr {
transform: translateX(0);
transform-origin: left;
}
.transition-rtl{
transform: translateX(0);
transform-origin: left;
}
html.is-animating .transition-rtl,html.is-animating .transition-ltr
{
opacity: 1;
transform: translateX(100%);
}
html.is-leaving .transition-rtl,html.is-leaving .transition-ltr
{
opacity:0;
transform: translateX(0);
}
有什么办法可以改变#swup 的类吗?或者有没有其他办法改变动画?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。