1

我是 Svelte 的新手，当用户导航到新页面时，我正在尝试将动画应用于我的页面内容。然而，动画导致我的整个网站在动画期间复制。

我的内容如下所示：

<div class="entire-page">
  <nav>
      <ul>
      <li> Navigation items </li>
      <li> Navigation items </li>
      <li> Navigation items </li>
      </ul>
    </nav>
    
    <div class="content" in:slideIn out:slideOut>
      Here is my first page content. This is supposed to slide in / out.
    </div>
</div>

但是，当动画执行时。它复制了所有内容（即.整个页面）：这是我的浏览器中的结果，直到动画消失：

<div class="entire-page">
  <nav>
      <ul>
      <li> Navigation items </li>
      <li> Navigation items </li>
      <li> Navigation items </li>
      </ul>
    </nav>
    
    <div class="content" in:slideIn out:slideOut>
      Here is my first page content. This is supposed to slide in / out.
    </div>
</div>

<div class="entire-page">
  <nav>
      <ul>
      <li> Navigation items </li>
      <li> Navigation items </li>
      <li> Navigation items </li>
      </ul>
    </nav>
    
    <div class="content" in:slideIn out:slideOut>
      Here is my second page content. This is supposed to slide in / out.
    </div>
</div>

这是由于缺少对元素的引用吗？

4

1 回答 1

2

是的，这是意料之中的。（除了动画和过渡之间的混淆）。

您的第一页正在离开 DOM 并被out:transition触发，这只不过是一些花哨的 css 以某种方式转换元素，在您的情况下是某种幻灯片动画。DOM 仍然存在，直到动画结束。

在您的新页面进入的同时，这会触发in:transition，再次只是花哨的 css，但 DOM 就在那里。

如您所见，逻辑上在输入/输出转换期间，两个整个页面都将出现。（几乎）你真的无能为力。

但是，您可以做的一件事是用in:动画的持续时间延迟动画out:，这样传入页面将等待传出页面滑开。当然，这仅在两个页面具有相同的过渡持续时间时才有效。

如果您不希望这两个页面位于另一个页面之下，则必须将它们包装在另一个 div 中（始终存在）并开始在 css 中进行定位。例如，这可以用于让页面从右侧滑入并从左侧滑出，给人一种将另一个推出的印象。

于 2021-11-09T19:51:22.783 回答