View Transition ve Activity

İki Yeni Bileşen

React 19.2 <Activity>'yi, React 19.3 de <ViewTransition>'ı kararlı hâle getirdi.¹² İkisi de aynı soruya cevap verir: arayüz bir durumdan diğerine geçerken ne olmalı? ViewTransition geçişi canlandırır, Activity gizlenen parçanın state'ini korur.

ViewTransition

<ViewTransition>, tarayıcının View Transition API'sini React'e bağlar. Animasyon istediğiniz parçayı sarmanız yeterlidir:²³

import { startTransition, useState, ViewTransition } from "react";

function SizeGuideToggle() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => startTransition(() => setIsOpen((open) => !open))}>
        Beden tablosu
      </button>
      {isOpen && (
        <ViewTransition>
          <SizeGuide />
        </ViewTransition>
      )}
    </>
  );
}

React ağacın nasıl değiştiğine bakıp animasyonun türünü kendisi seçer:³

Varsayılan animasyon tarayıcının cross-fade'idir. Özelleştirmek için türe bir View Transition Class verir, CSS'te view transition pseudo-elemanlarıyla stillersiniz:³

<ViewTransition enter="slide-up" exit="slide-down">
  <CartDrawer />
</ViewTransition>

::view-transition-new(.slide-up) {
  animation: 250ms ease-out both slide-from-bottom;
}
::view-transition-old(.slide-down) {
  animation: 200ms ease-in both slide-to-bottom;
}

Birkaç kural:

• Ortak eleman geçişi için name verin. Liste sayfasındaki ürün görseli ile detay sayfasındaki büyük görsel aynı name'i taşırsa React biri kaybolup diğeri gelirken görseli yerinden büyüterek taşır. name uygulamada aynı anda tek olmalıdır; name={`product-${id}`} gibi bir önek kullanın. Diğer durumlarda isim vermeyin, React otomatik verir.³

• Yönü addTransitionType ile söyleyin. Galeride ileri ve geri aynı state'i değiştirir ama farklı yöne kaymalıdır; transition'a bir tür ekleyip class'ı türe göre seçersiniz.²³

• enter/exit yalnızca en üstte çalışır. ViewTransition'ın üstünde bir DOM elemanı varsa ekleme ve çıkarma animasyonu tetiklenmez.³

• startViewTransition'ı kendiniz çağırmayın. React çağırır ve başka bir View Transition'ı keser.³

Suspense ile

<ViewTransition> bir Suspense boundary'yi sardığında React iskeletten içeriğe geçişi canlandırır. 19.3 ile React, açılış animasyonundan önce görünür görselleri ve yeni fontları en fazla 500 ms bekler; içerik görseli yerinde açılır, metin yanlış fontla yanıp sönmez.²⁴

<ViewTransition>
  <Suspense fallback={<ProductSkeleton />}>
    <ProductDetails id={id} />
  </Suspense>
</ViewTransition>

Erişilebilirlik

React, hareketi azaltmak isteyen kullanıcılar için animasyonları kendiliğinden kapatmaz. Dokümanın önerisi: her zaman prefers-reduced-motion ile kapatın ya da yumuşatın.³

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

Konunun ayrıntısı Renk, kontrast ve hareket dersinde.

Activity

<Activity> bir parçayı ekrandan kaldırmadan gizler. mode="hidden" olduğunda React çocukları display: none ile saklar ve Effect'lerini söker. visible'a dönünce state ve DOM olduğu gibi geri gelir, Effect'ler yeniden kurulur.⁵

import { Activity, useState } from "react";

function ProductTabs() {
  const [tab, setTab] = useState<"details" | "reviews">("details");

  return (
    <>
      <TabBar value={tab} onChange={setTab} />
      <Activity mode={tab === "details" ? "visible" : "hidden"}>
        <ProductDescription />
      </Activity>
      <Activity mode={tab === "reviews" ? "visible" : "hidden"}>
        <ReviewList />
      </Activity>
    </>
  );
}

Koşullu render'dan farkı:

Tipik kullanımlar: kullanıcının yazdığı yorum taslağı sekme değişince kaybolmasın, kapatılan kenar menüsü kaydırma konumunu hatırlasın. Ayrıca kullanıcının muhtemelen açacağı bir ekranı gizli modda önceden render edip verisini hazırlayabilirsiniz; gizli parça daha düşük öncelikle render edilir.⁵⁶

Kendin Dene

• SizeGuideToggle'da startTransition'ı kaldırın; animasyon ne oldu?

• CartDrawer için slide-up/slide-down class'larını ve @keyframes'leri yazın, sonra işletim sisteminizde "hareketi azalt" ayarını açıp deneyin.

• Ürün kartındaki görsel ile detaydaki görsele aynı name'i verin ve sayfa geçişini izleyin.

• ProductTabs'ta yorum formuna bir şey yazın, sekmeyi değiştirip geri dönün. Sonra Activity yerine && kullanıp tekrar deneyin.

Detaylı Öğrenmek İçin

• Resmi doküman: <ViewTransition> referansı; ekleme/çıkarma, ortak eleman, liste sıralama, Suspense ve JavaScript ile animasyon örnekleri.³

• Video: Chance Strickland'ın React ekibiyle birlikte hazırladığı "View Transitions and Activity" konuşması (React Conf 2025, 1. gün).⁷

• Resmi doküman: React Labs'in Nisan 2025 yazısı; iki özelliğin neden ve nasıl tasarlandığı.⁶