2

我正在尝试从 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
    }
})

样式.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 更改课程？或者有没有其他方法可以改变动画？

4

0 回答 0