経路と重なり要素に対するSvelte転移

Svelteの移行システムは使いやすさのために賞賛されますが、それはあなたのためにすべてを処理しません.いくつかの特別な注意を必要とする1つの一般的なケースは、同じスペースを占有することになっている両方の要素間の遷移です.
同じ場所にスムーズに移行する要素の代わりに、両者は同時にDOMに存在するので、遷移は実行されている間、ブラウザはもう一方の要素の横にある要素をレンダリングします.出てくる要素が消えると、新しい要素が正しい場所に飛び出す.
対話的な例のためのView this post on the website.
これは最も見苦しいですが、CSSグリッドの簡単なアプリケーションで修正するのはかなり簡単です.
コンテナ要素は1行1列のグリッドです.すべての子要素は最初の行と列に強制されるので、重複します.(これがなければ、ブラウザは間違いを犯し、余分なグリッドセルを追加します)
その後、ちょうどあなたの要素の移行を設定し、行く準備が整いました!

<style>
  .transition-container {
    display: grid;
    template-grid-rows: 1;
    template-grid-columns: 1;
  }

  .transition-container > * {
    grid-row: 1;
    grid-column: 1;
  }
</style>

<div class="transition-container">
  {#if enabled}
    <h1 in:fly={{ x: -200 }} out:fade>Enabled!</h1>
  {:else}
    <h1 in:fly={{ x: -200 }} out:fade>Disabled!</h1>
  {/if}
</div>

対話的な例のためのView this post on the website.

経路遷移
この同じテクニックは、単一のページ・アプリケーションのルート間の遷移を容易にするために用いることができる.以下はtinroルータを使用した例です.

<script>
  import { Route } from 'tinro';
  import { fade } from 'svelte/transition';
</script>
<style>
  #app {
    display: grid;
    height: 100%;
    width: 100%;
    overflow: auto;
    grid-template:
      "nav" 3rem
      "main" 1fr
      / auto;
  }

  nav {
    grid-area: nav;
  }

  main {
    grid-area: main;
    display: grid;
    template-grid-rows: 1;
    template-grid-columns: 1;
  }

  /* use :global since the Route element may be in another component */
  main > :global(*) {
    grid-row: 1;
    grid-column: 1;
  }
</style>

<div id="app">
<nav>Nav Bar</nav>
<main>
  <Route path="/">
    <div transition:fade>page</div>
  </Route>

  <Route path="/:post" let:meta>
    {#key meta.match}
      <div transition:fly={{ x: 200 }}>{meta.params.post}</div>
    {/key}
  </Route>
</main>
</div>

対話的な例のためのView this post on the website.
私は将来のポストでより高度な遷移技術をカバーします.読書ありがとう!