画面上の要素は常に静的に留まるわけではありません。ユーザーの操作によって消えたり、現れたりすることがあります。宣言的フレームワークでは、これを条件文で簡単に実装できます。

function App() {
// {...省略}
const [show, setShow] = useState(false)

return (

<>
<button onClick={() => setShow(!show)}>Toggle</button>
{show && <div>content</div>}
</>
) }

では、これにアニメーションを追加するにはどうすればよいでしょうか？

CSSでDOM要素が現れたときにアニメーションを追加するのは簡単です。CSSのアニメーションはDOMが現れるとすぐに動作します。しかし、DOM要素が消えるときにアニメーションを追加するのは難しいです。逆説的に、消えるアニメーションはDOMが消えないことが必要です。

私たちは生成と消滅のトランジションを望んでいます。突然の出現、突然の消失。ユーザーは集中していないと自分の前の行動を簡単に忘れてしまい、状況の変化を認識しにくくなります。注意を集中する必要があるUXは、ユーザーに疲労を感じさせます。トランジションはユーザーの認知負荷を軽減します。生成と消滅に非対称アニメーションを追加することで、ユーザーは自分の行動をより明確に認識できます。集中力が低くても。

消えるアニメーションを実装するには、DOMが消える瞬間を捕捉する必要があります。そして、消えたDOMを再度クローンして元の位置に配置する必要があります。元の位置に配置するために、DOMが生成される瞬間に親要素を参照し、消えるときに再度親に挿入します。そしてアニメーションを実行し、アニメーションが終了したら再度DOMを削除します。

つまり、次のようなプロセスが発生します：

┌─────────┐     ┌─────────────┐     ┌───────────────┐     ┌──────────────┐
│   DOM   │ ──> │    Clone    │ ──> │   Animation   │ ──> │    Final     │
│ Removed │     │   Restore   │     │   Running...  │     │   Cleanup    │
│         │     │             │     │               │     │              │
└─────────┘     └─────────────┘     └───────────────┘     └──────────────┘
     ↓                 ↓                     ↓                    ↓
  [Gone]         [Reappear]          [Fade Out]          [Destroyed]
                                        ⚡⚡⚡

Reactでは、motionというライブラリが生成と消滅のアニメーションを実装できるようにします。Svelteでは、transition:ディレクティブで生成と消滅のアニメーションをネイティブにサポートしています。しかし、他のライブラリはどうでしょうか？motionのようなライブラリを持っているでしょうか？それともSvelteのようにライブラリ内で生成と消滅のアニメーションをサポートすべきでしょうか？

新しいフレームワークの参入障壁はここから始まります。どんなに優れたパフォーマンス最適化と美しいDXを持っていても、作成する必要がある画面の要件を満たすことができなければ採用は困難です。その中でも、トランジションアニメーションはプロダクション製品を作成する際に不可欠な機能だと思います。

そのため、私はフレームワークに関係なくトランジションが動作できるよう、フレームワーク非依存のライブラリを作成しています。DOM要素がいつ生成され、いつ破棄されるかがわかれば、どのフレームワークでも同じコードで同じアニメーションを実装できます。Reactでのみ使用されるmotionのようなライブラリに依存することなく。

ssgoiは全フレームワークのサポートを目指しています。そして、ページトランジションアニメーションをターゲットにしています。しかし、原理は同じです。ssgoiのトランジションは個々のDOM要素にも適用できます。次のように：

SSGOI

Options

start

opacity

axis