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 (将#修改为@）