0

我正在尝试从 barber.js 站点实现基本的 GSAP 淡入/淡出演示。

测试页一的标记如下：

<body style="background-color: red; color: white;" data-barba="wrapper" data-barba="page1">
    <h3>Constant</h3>
    <main data-barba="container" data-barba-namespace="home">
    <h1>Page 1</h1>
    <a href="barba2.php" title="go to gae 2">go to page 2</a>
</main>

测试页2的标记如下：

<body style="background-color: white; color: red;" data-barba="page2">
    <h3>Constant</h3>
    <main data-barba="container" data-barba-namespace="home">
    <h1>Page 2</h1>
    <a href="barba1.php" title="go to gae 1">go to page 1</a>
</main>

在每个页面的底部使用以下 JS：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@barba/core"></script>
<script>
    barba.init({
        //sync: true,
        transitions: [{
            name: 'opacity-transition',
            leave(data) {
            return gsap.to(data.current.container, {
                opacity: 0

            });
            },
            enter(data) {
            return gsap.from(data.next.container, {
                opacity: 0
            });
            }
        }]
    });
</script>

离开当前页面时，旧元素会淡出 OK，但是新元素会出现在早期的一小部分下方，这意味着我有两个元素，当旧元素消失时，新元素会跳起来？

有没有办法让新的只有在旧的完成后才开始出现？

4

0 回答 0