Svelte and Sapper: слайд со скрытым элементом - PullRequest
Новая
       106

Svelte and Sapper: слайд со скрытым элементом

1 голос
/ 09 ноября 2019

С помощью Svelte я хочу настроить элемент переключения слайдов с переходом 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>

Это работает, но это немного хитро и выглядит для меня скорее как обходной путь.

Кроме того, он производит небольшой крен при загрузке страницы,как значок, показанный как «открытый» перед немедленным откатом.

Могу ли я добиться этого более разумным способом?

...