2

使用 Svelte，我想设置一个带有苗条过渡的滑动切换元素。

但我也希望在服务器端为 SEO 呈现默认的不可见文本。

所以我最终得到了这个技巧：

<script>
  import { slide } from 'svelte/transition';

  export let title;
  // We need to combine visible and hidden to make sure the text is rendered on SSR calls.
  export let visible = true;
  export let hidden = true;

  if (typeof window !== 'undefined') {
    visible = false;
    hidden = false;
  }
</script>

<div class="border mb-6">
  <div
    class="p-6 select-none cursor-pointer flex items-center"
    on:click={() => visible = !visible}
  >
    <h3 class="text-base flex-1">{title}</h3>
    <i class="fa {visible ? 'fa-caret-up text-primary' : 'fa-caret-right'}"></i>
  </div>
  {#if visible}
    <div class="bg-primary p-6 article" transition:slide class:hidden>
      <slot/>
    </div>
  {/if}
</div>

它有效，但这有点棘手，对我来说更像是一种解决方法。

此外，它会在页面加载时产生一些小故障，例如图标在立即回滚之前显示为“打开”。

我能以更聪明的方式实现它吗？

4

0 回答 0