From 7629f3e22c761531307989f4a9853be6b5bef0ed Mon Sep 17 00:00:00 2001 From: Rahman Nurudin Date: Sat, 14 Feb 2026 17:32:22 +0700 Subject: [PATCH 1/2] docs: use component translation (#677) --- src/content/reference/react/use.md | 124 ++++++++++++++--------------- 1 file changed, 62 insertions(+), 62 deletions(-) diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md index 91e19c4b4..e037c8b68 100644 --- a/src/content/reference/react/use.md +++ b/src/content/reference/react/use.md @@ -4,7 +4,7 @@ title: use -`use` is a React API that lets you read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). +`use` adalah API React yang memungkinkan Anda membaca nilai dari sumber daya seperti [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau [context](/learn/passing-data-deeply-with-context). ```js const value = use(resource); @@ -16,11 +16,11 @@ const value = use(resource); --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `use(resource)` {/*use*/} -Call `use` in your component to read the value of a resource like a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). +Panggil `use` di komponen Anda untuk membaca nilai dari sumber daya seperti [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau [context](/learn/passing-data-deeply-with-context). ```jsx import { use } from 'react'; @@ -31,33 +31,33 @@ function MessageComponent({ messagePromise }) { // ... ``` -Unlike React Hooks, `use` can be called within loops and conditional statements like `if`. Like React Hooks, the function that calls `use` must be a Component or Hook. +Tidak seperti React Hooks, `use` dapat dipanggil di dalam loop dan pernyataan kondisional seperti `if`. Seperti React Hooks, fungsi yang memanggil `use` harus berupa Komponen atau Hook. -When called with a Promise, the `use` API integrates with [`Suspense`](/reference/react/Suspense) and [error boundaries](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). The component calling `use` *suspends* while the Promise passed to `use` is pending. If the component that calls `use` is wrapped in a Suspense boundary, the fallback will be displayed. Once the Promise is resolved, the Suspense fallback is replaced by the rendered components using the data returned by the `use` API. If the Promise passed to `use` is rejected, the fallback of the nearest Error Boundary will be displayed. +Saat dipanggil dengan Promise, API `use` terintegrasi dengan [`Suspense`](/reference/react/Suspense) dan [batas kesalahan](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Komponen yang memanggil `use` akan *tersuspensi* selama Promise yang diberikan ke `use` masih tertunda. Jika komponen yang memanggil `use` dibungkus dalam batas Suspense, tampilan cadangan akan ditampilkan. Setelah Promise diselesaikan, tampilan cadangan Suspense digantikan oleh komponen yang dirender menggunakan data yang dikembalikan oleh API `use`. Jika Promise yang diberikan ke `use` ditolak, tampilan cadangan dari batas kesalahan terdekat akan ditampilkan. -[See more examples below.](#usage) +[Lihat lebih banyak contoh di bawah ini.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `resource`: this is the source of the data you want to read a value from. A resource can be a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or a [context](/learn/passing-data-deeply-with-context). +* `resource`: ini adalah sumber data tempat Anda ingin membaca nilai. Sumber daya bisa berupa [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau [context](/learn/passing-data-deeply-with-context). -#### Returns {/*returns*/} +#### Nilai kembali {/*returns*/} -The `use` API returns the value that was read from the resource like the resolved value of a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or [context](/learn/passing-data-deeply-with-context). +API `use` mengembalikan nilai yang dibaca dari sumber daya seperti nilai hasil penyelesaian dari [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) atau [context](/learn/passing-data-deeply-with-context). -#### Caveats {/*caveats*/} +#### Catatan {/*caveats*/} -* The `use` API must be called inside a Component or a Hook. -* When fetching data in a [Server Component](/reference/rsc/server-components), prefer `async` and `await` over `use`. `async` and `await` pick up rendering from the point where `await` was invoked, whereas `use` re-renders the component after the data is resolved. -* Prefer creating Promises in [Server Components](/reference/rsc/server-components) and passing them to [Client Components](/reference/rsc/use-client) over creating Promises in Client Components. Promises created in Client Components are recreated on every render. Promises passed from a Server Component to a Client Component are stable across re-renders. [See this example](#streaming-data-from-server-to-client). +* API `use` harus dipanggil di dalam Komponen atau Hook. +* Saat mengambil data di [Server Component](/reference/rsc/server-components), gunakan `async` dan `await` sebagai pilihan utama dibanding `use`. `async` dan `await` melanjutkan perenderan dari titik ketika `await` dipanggil, sedangkan `use` merender ulang komponen setelah data terselesaikan. +* Lebih disarankan membuat Promise di [Server Components](/reference/rsc/server-components) dan meneruskannya ke [Client Components](/reference/rsc/use-client) daripada membuat Promise di Client Components. Promise yang dibuat di Client Components dibuat ulang pada setiap perenderan. Promise yang diteruskan dari Server Component ke Client Component stabil di seluruh perenderan ulang. [Lihat contoh ini](#streaming-data-from-server-to-client). --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Reading context with `use` {/*reading-context-with-use*/} +### Membaca context dengan `use` {/*reading-context-with-use*/} -When a [context](/learn/passing-data-deeply-with-context) is passed to `use`, it works similarly to [`useContext`](/reference/react/useContext). While `useContext` must be called at the top level of your component, `use` can be called inside conditionals like `if` and loops like `for`. `use` is preferred over `useContext` because it is more flexible. +Saat [context](/learn/passing-data-deeply-with-context) diberikan ke `use`, perilakunya mirip dengan [`useContext`](/reference/react/useContext). Sementara `useContext` harus dipanggil di level teratas komponen Anda, `use` dapat dipanggil di dalam kondisional seperti `if` dan loop seperti `for`. `use` lebih disarankan daripada `useContext` karena lebih fleksibel. ```js [[2, 4, "theme"], [1, 4, "ThemeContext"]] import { use } from 'react'; @@ -67,9 +67,9 @@ function Button() { // ... ``` -`use` returns the context value for the context you passed. To determine the context value, React searches the component tree and finds **the closest context provider above** for that particular context. +`use` mengembalikan nilai context untuk context yang Anda berikan. Untuk menentukan nilai context, React menelusuri pohon komponen dan menemukan **penyedia context terdekat di atasnya** untuk context tersebut. -To pass context to a `Button`, wrap it or one of its parent components into the corresponding context provider. +Untuk memberikan context ke `Button`, bungkus `Button` atau salah satu komponen induknya ke dalam penyedia context yang sesuai. ```js [[1, 3, "ThemeContext"], [2, 3, "\\"dark\\""], [1, 5, "ThemeContext"]] function MyPage() { @@ -81,13 +81,13 @@ function MyPage() { } function Form() { - // ... renders buttons inside ... + // ... tampilkan buttons di dalam ... } ``` -It doesn't matter how many layers of components there are between the provider and the `Button`. When a `Button` *anywhere* inside of `Form` calls `use(ThemeContext)`, it will receive `"dark"` as the value. +Tidak masalah berapa banyak lapisan komponen di antara penyedia dan `Button`. Saat `Button` *di mana pun* di dalam `Form` memanggil `use(ThemeContext)`, nilai yang diterima adalah `"dark"`. -Unlike [`useContext`](/reference/react/useContext), `use` can be called in conditionals and loops like `if`. +Tidak seperti [`useContext`](/reference/react/useContext), `use` dapat dipanggil di dalam kondisional dan loop seperti `if`. ```js [[1, 2, "if"], [2, 3, "use"]] function HorizontalRule({ show }) { @@ -99,11 +99,11 @@ function HorizontalRule({ show }) { } ``` -`use` is called from inside a `if` statement, allowing you to conditionally read values from a Context. +`use` dipanggil dari dalam pernyataan `if`, sehingga Anda bisa membaca nilai dari Context secara kondisional. -Like `useContext`, `use(context)` always looks for the closest context provider *above* the component that calls it. It searches upwards and **does not** consider context providers in the component from which you're calling `use(context)`. +Seperti `useContext`, `use(context)` selalu mencari penyedia context terdekat *di atas* komponen yang memanggilnya. React menelusuri ke atas dan **tidak** mempertimbangkan penyedia context di dalam komponen tempat Anda memanggil `use(context)`. @@ -124,9 +124,9 @@ export default function MyApp() { function Form() { return ( - - - + + + ); } @@ -194,9 +194,9 @@ function Button({ show, children }) { -### Streaming data from the server to the client {/*streaming-data-from-server-to-client*/} +### Men-stream data dari server ke klien {/*streaming-data-from-server-to-client*/} -Data can be streamed from the server to the client by passing a Promise as a prop from a Server Component to a Client Component. +Data dapat di-stream dari server ke klien dengan meneruskan Promise sebagai prop dari Server Component ke Client Component. ```js [[1, 4, "App"], [2, 2, "Message"], [3, 7, "Suspense"], [4, 8, "messagePromise", 30], [4, 5, "messagePromise"]] import { fetchMessage } from './lib.js'; @@ -205,14 +205,14 @@ import { Message } from './message.js'; export default function App() { const messagePromise = fetchMessage(); return ( - waiting for message...

}> + menunggu pesan...

}> ); } ``` -The Client Component then takes the Promise it received as a prop and passes it to the `use` API. This allows the Client Component to read the value from the Promise that was initially created by the Server Component. +Client Component kemudian mengambil Promise yang diterima sebagai prop dan meneruskannya ke API `use`. Ini memungkinkan Client Component membaca nilai dari Promise yang awalnya dibuat oleh Server Component. ```js [[2, 6, "Message"], [4, 6, "messagePromise"], [4, 7, "messagePromise"], [5, 7, "use"]] // message.js @@ -222,10 +222,10 @@ import { use } from 'react'; export function Message({ messagePromise }) { const messageContent = use(messagePromise); - return

Here is the message: {messageContent}

; + return

Berikut adalah pesannya: {messageContent}

; } ``` -Because `Message` is wrapped in [`Suspense`](/reference/react/Suspense), the fallback will be displayed until the Promise is resolved. When the Promise is resolved, the value will be read by the `use` API and the `Message` component will replace the Suspense fallback. +Karena `Message` dibungkus dalam [`Suspense`](/reference/react/Suspense), tampilan cadangan akan ditampilkan sampai Promise terselesaikan. Ketika Promise terselesaikan, nilai akan dibaca oleh API `use` dan komponen `Message` akan menggantikan tampilan cadangan Suspense. @@ -236,12 +236,12 @@ import { use, Suspense } from "react"; function Message({ messagePromise }) { const messageContent = use(messagePromise); - return

Here is the message: {messageContent}

; + return

Berikut adalah pesannya: {messageContent}

; } export function MessageContainer({ messagePromise }) { return ( - ⌛Downloading message...

}> + ⌛Mengunduh pesan...

}> ); @@ -267,7 +267,7 @@ export default function App() { if (show) { return ; } else { - return ; + return ; } } ``` @@ -294,16 +294,16 @@ root.render( -When passing a Promise from a Server Component to a Client Component, its resolved value must be serializable to pass between server and client. Data types like functions aren't serializable and cannot be the resolved value of such a Promise. +Saat meneruskan Promise dari Server Component ke Client Component, nilai hasil penyelesaian harus dapat diserialisasi agar bisa dikirim antara server dan klien. Tipe data seperti fungsi tidak dapat diserialisasi dan tidak bisa menjadi nilai hasil penyelesaian dari Promise tersebut. -#### Should I resolve a Promise in a Server or Client Component? {/*resolve-promise-in-server-or-client-component*/} +#### Haruskah saya menyelesaikan Promise di Server atau Client Component? {/*resolve-promise-in-server-or-client-component*/} -A Promise can be passed from a Server Component to a Client Component and resolved in the Client Component with the `use` API. You can also resolve the Promise in a Server Component with `await` and pass the required data to the Client Component as a prop. +Promise dapat diteruskan dari Server Component ke Client Component dan diselesaikan di Client Component dengan API `use`. Anda juga dapat menyelesaikan Promise di Server Component dengan `await` dan meneruskan data yang dibutuhkan ke Client Component sebagai prop. ```js export default async function App() { @@ -312,24 +312,24 @@ export default async function App() { } ``` -But using `await` in a [Server Component](/reference/react/components#server-components) will block its rendering until the `await` statement is finished. Passing a Promise from a Server Component to a Client Component prevents the Promise from blocking the rendering of the Server Component. +Namun menggunakan `await` di [Server Component](/reference/react/components#server-components) akan memblokir perenderan sampai pernyataan `await` selesai. Meneruskan Promise dari Server Component ke Client Component mencegah Promise tersebut memblokir perenderan Server Component. -### Dealing with rejected Promises {/*dealing-with-rejected-promises*/} +### Menangani Promise yang ditolak {/*dealing-with-rejected-promises*/} -In some cases a Promise passed to `use` could be rejected. You can handle rejected Promises by either: +Dalam beberapa kasus Promise yang diberikan ke `use` bisa ditolak. Anda dapat menangani Promise yang ditolak dengan salah satu cara berikut: -1. [Displaying an error to users with an error boundary.](#displaying-an-error-to-users-with-error-boundary) -2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch) +1. [Menampilkan kesalahan kepada pengguna dengan batas kesalahan.](#displaying-an-error-to-users-with-error-boundary) +2. [Memberikan nilai alternatif dengan `Promise.catch`](#providing-an-alternative-value-with-promise-catch) -`use` cannot be called in a try-catch block. Instead of a try-catch block [wrap your component in an Error Boundary](#displaying-an-error-to-users-with-error-boundary), or [provide an alternative value to use with the Promise's `.catch` method](#providing-an-alternative-value-with-promise-catch). +`use` tidak dapat dipanggil di dalam blok try-catch. Alih-alih menggunakan try-catch, [bungkus komponen Anda dengan batas kesalahan](#displaying-an-error-to-users-with-error-boundary), atau [berikan nilai alternatif untuk digunakan melalui metode `.catch` pada Promise](#providing-an-alternative-value-with-promise-catch). -#### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/} +#### Menampilkan kesalahan kepada pengguna dengan batas kesalahan {/*displaying-an-error-to-users-with-error-boundary*/} -If you'd like to display an error to your users when a Promise is rejected, you can use an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `use` API in an error boundary. If the Promise passed to `use` is rejected the fallback for the error boundary will be displayed. +Jika Anda ingin menampilkan kesalahan kepada pengguna saat Promise ditolak, Anda bisa menggunakan [batas kesalahan](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Untuk menggunakan batas kesalahan, bungkus komponen tempat Anda memanggil API `use` dengan batas kesalahan. Jika Promise yang diberikan ke `use` ditolak, tampilan cadangan untuk batas kesalahan akan ditampilkan. @@ -341,8 +341,8 @@ import { ErrorBoundary } from "react-error-boundary"; export function MessageContainer({ messagePromise }) { return ( - ⚠️Something went wrong

}> - ⌛Downloading message...

}> + ⚠️Terjadi kesalahan

}> + ⌛Mengunduh pesan...

}> @@ -351,7 +351,7 @@ export function MessageContainer({ messagePromise }) { function Message({ messagePromise }) { const content = use(messagePromise); - return

Here is the message: {content}

; + return

Berikut adalah pesannya: {content}

; } ``` @@ -374,7 +374,7 @@ export default function App() { if (show) { return ; } else { - return ; + return ; } } ``` @@ -410,9 +410,9 @@ root.render( ``` -#### Providing an alternative value with `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/} +#### Memberikan nilai alternatif dengan `Promise.catch` {/*providing-an-alternative-value-with-promise-catch*/} -If you'd like to provide an alternative value when the Promise passed to `use` is rejected you can use the Promise's [`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) method. +Jika Anda ingin memberikan nilai alternatif ketika Promise yang diberikan ke `use` ditolak, Anda dapat menggunakan metode [`catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) pada Promise. ```js [[1, 6, "catch"],[2, 7, "return"]] import { Message } from './message.js'; @@ -421,42 +421,42 @@ export default function App() { const messagePromise = new Promise((resolve, reject) => { reject(); }).catch(() => { - return "no new message found."; + return "tidak ada pesan baru yang ditemukan."; }); return ( - waiting for message...

}> + menunggu pesan...

}> ); } ``` -To use the Promise's `catch` method, call `catch` on the Promise object. `catch` takes a single argument: a function that takes an error message as an argument. Whatever is returned by the function passed to `catch` will be used as the resolved value of the Promise. +Untuk menggunakan metode `catch` pada Promise, panggil `catch` pada objek Promise. `catch` menerima satu argumen: sebuah fungsi yang menerima pesan kesalahan sebagai argumen. Apa pun yang dikembalikan oleh fungsi yang diberikan ke `catch` akan digunakan sebagai nilai hasil penyelesaian dari Promise. --- -## Troubleshooting {/*troubleshooting*/} +## Pemecahan masalah {/*troubleshooting*/} ### "Suspense Exception: This is not a real error!" {/*suspense-exception-error*/} -You are either calling `use` outside of a React Component or Hook function, or calling `use` in a try–catch block. If you are calling `use` inside a try–catch block, wrap your component in an error boundary, or call the Promise's `catch` to catch the error and resolve the Promise with another value. [See these examples](#dealing-with-rejected-promises). +Anda memanggil `use` di luar Komponen React atau fungsi Hook, atau memanggil `use` di dalam blok try-catch. Jika Anda memanggil `use` di dalam blok try-catch, bungkus komponen Anda dengan batas kesalahan, atau panggil `catch` pada Promise untuk menangkap kesalahan dan menyelesaikan Promise dengan nilai lain. [Lihat contoh ini](#dealing-with-rejected-promises). -If you are calling `use` outside a React Component or Hook function, move the `use` call to a React Component or Hook function. +Jika Anda memanggil `use` di luar Komponen React atau fungsi Hook, pindahkan pemanggilan `use` ke Komponen React atau fungsi Hook. ```jsx function MessageComponent({messagePromise}) { function download() { - // ❌ the function calling `use` is not a Component or Hook + // ❌ Fungsi yang memanggil `use` bukan Komponen atau Hook. const message = use(messagePromise); // ... ``` -Instead, call `use` outside any component closures, where the function that calls `use` is a Component or Hook. +Sebagai gantinya, panggil `use` di dalam komponen, yaitu ketika fungsi yang memanggil `use` adalah Komponen atau Hook. ```jsx function MessageComponent({messagePromise}) { - // ✅ `use` is being called from a component. + // ✅ `use` dipanggil di dalam Komponen. const message = use(messagePromise); // ... ``` From dc62a04d87493606520ae8caef52ae7df0a26e7b Mon Sep 17 00:00:00 2001 From: Rahman Nurudin Date: Sat, 14 Feb 2026 18:01:49 +0700 Subject: [PATCH 2/2] docs: ViewTransition component translation (#768) --- src/content/reference/react/ViewTransition.md | 218 +++++++++--------- 1 file changed, 109 insertions(+), 109 deletions(-) diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md index 53b2adfee..6eb9bbc05 100644 --- a/src/content/reference/react/ViewTransition.md +++ b/src/content/reference/react/ViewTransition.md @@ -19,7 +19,7 @@ Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam pr -`` lets you animate elements that update inside a Transition. +`` memungkinkan Anda untuk menganimasikan elemen yang diperbarui di dalam Transisi. ```js @@ -40,93 +40,93 @@ import {unstable_ViewTransition as ViewTransition} from 'react'; ### `` {/*viewtransition*/} -Wrap elements in `` to animate them when they update inside a [Transition](/reference/react/useTransition). React uses the following heuristics to determine if a View Transition activates for an animation: +Membungkus element didalam `` untuk menganimasikannya saat diperbarui di dalam [Transisi](/reference/react/useTransition). React menggunakan heuristik berikut untuk menentukan apakah Transisi Tampilan diaktifkan untuk animasi: -- `enter`: If a `ViewTransition` itself gets inserted in this Transition, then this will activate. -- `exit`: If a `ViewTransition` itself gets deleted in this Transition, then this will activate. -- `update`: If a `ViewTransition` has any DOM mutations inside it that React is doing (such as a prop changing) or if the `ViewTransition` boundary itself changes size or position due to an immediate sibling. If there are nested` ViewTransition` then the mutation applies to them and not the parent. -- `share`: If a named `ViewTransition` is inside a deleted subtree and another named `ViewTransition` with the same name is part of an inserted subtree in the same Transition, they form a Shared Element Transition, and it animates from the deleted one to the inserted one. +- `enter`: Jika `` itu sendiri dimasukkan dalam Transisi ini, maka ini akan diaktifkan. +- `exit`: Jika `` itu sendiri dihapus dalam Transisi ini, maka ini akan diaktifkan. +- `update`: Jika `` memiliki mutasi DOM di dalamnya yang dilakukan React (seperti perubahan prop) atau jika batas `` itu sendiri berubah ukuran atau posisi karena saudara langsung. Jika ada `` bersarang, maka mutasi berlaku untuk mereka dan bukan untuk induk. +- `share`: Jika `` bernama berada di dalam subpohon yang dihapus dan `` bernama lainnya dengan nama yang sama merupakan bagian dari subpohon yang dimasukkan dalam Transisi yang sama, mereka membentuk Transisi Elemen Bersama, dan menganimasikan dari yang dihapus ke yang dimasukkan. -By default, `` animates with a smooth cross-fade (the browser default view transition). You can customize the animation by providing a [View Transition Class](#view-transition-class) to the `` component. You can customize animations for each kind of trigger (see [Styling View Transitions](#styling-view-transitions)). +Secara default, `` menganimasikan dengan cross-fade yang halus (transisi tampilan default browser). Anda dapat menyesuaikan animasi dengan menyediakan [Kelas Transisi Tampilan](#view-transition-class) ke komponen ``. Anda dapat menyesuaikan animasi untuk setiap jenis pemicu (lihat [Membuat Gaya Transisi Tampilan](#styling-view-transitions)). -#### How does `` work? {/*how-does-viewtransition-work*/} +#### Bagaimana `` bekerja? {/*how-does-viewtransition-work*/} -Under the hood, React applies `view-transition-name` to inline styles of the nearest DOM node nested inside the `` component. If there are multiple sibling DOM nodes like `
` then React adds a suffix to the name to make each unique but conceptually they're part of the same one. React doesn't apply these eagerly but only at the time that boundary should participate in an animation. +Di balik layar, React menerapkan `view-transition-name` ke gaya inline dari node DOM terdekat yang bersarang di dalam komponen ``. Jika ada beberapa node DOM saudara seperti `
`, maka React menambahkan sufiks ke nama untuk membuat masing-masing unik tetapi secara konseptual mereka adalah bagian dari yang sama. React tidak menerapkan ini dengan cepat tetapi hanya pada saat batas tersebut harus berpartisipasi dalam animasi. -React automatically calls `startViewTransition` itself behind the scenes so you should never do that yourself. In fact, if you have something else on the page running a ViewTransition React will interrupt it. So it's recommended that you use React itself to coordinate these. If you had other ways of trigger ViewTransitions in the past, we recommend that you migrate to the built-in way. +React secara otomatis memanggil `startViewTransition` sendiri di balik layar sehingga Anda tidak boleh melakukannya sendiri. Faktanya, jika Anda memiliki sesuatu lain di halaman yang menjalankan ViewTransition, React akan mengganggu itu. Jadi disarankan untuk menggunakan React itu sendiri untuk mengkoordinasikan ini. Jika Anda memiliki cara lain untuk memicu ViewTransitions di masa lalu, kami sarankan untuk bermigrasi ke cara bawaan. -If there are other React ViewTransitions already running then React will wait for them to finish before starting the next one. However, importantly if there are multiple updates happening while the first one is running, those will all be batched into one. If you start A->B. Then in the meantime you get an update to go to C and then D. When the first A->B animation finishes the next one will animate from B->D. +Jika ada ViewTransitions React lainnya yang sudah berjalan, maka React akan menunggu mereka selesai sebelum memulai yang berikutnya. Namun, pentingnya jika ada beberapa pembaruan yang terjadi saat yang pertama berjalan, semuanya akan digabungkan menjadi satu. Jika Anda memulai A->B. Kemudian di antara waktu itu Anda mendapatkan pembaruan untuk pergi ke C dan kemudian D. Ketika animasi A->B pertama selesai, yang berikutnya akan menganimasikan dari B->D. -The `getSnapshotBeforeUpdate` life-cycle will be called before `startViewTransition` and some `view-transition-name` will update at the same time. +Siklus hidup `getSnapshotBeforeUpdate` akan dipanggil sebelum `startViewTransition` dan beberapa `view-transition-name` akan diperbarui pada saat yang sama. -Then React calls `startViewTransition`. Inside the `updateCallback`, React will: +Kemudian React memanggil `startViewTransition`. Di dalam `updateCallback`, React akan: -- Apply its mutations to the DOM and invoke useInsertionEffects. -- Wait for fonts to load. -- Call componentDidMount, componentDidUpdate, useLayoutEffect and refs. -- Wait for any pending Navigation to finish. -- Then React will measure any changes to the layout to see which boundaries will need to animate. +- Menerapkan mutasi ke DOM dan memanggil useInsertionEffects. +- Menunggu font dimuat. +- Memanggil componentDidMount, componentDidUpdate, useLayoutEffect dan refs. +- Menunggu Navigasi tertunda selesai. +- Kemudian React akan mengukur perubahan apa pun pada tata letak untuk melihat batas mana yang perlu dianimasikan. -After the ready Promise of the `startViewTransition` is resolved, React will then revert the `view-transition-name`. Then React will invoke the `onEnter`, `onExit`, `onUpdate` and `onShare` callbacks to allow for manual programmatic control over the Animations. This will be after the built-in default ones have already been computed. +Setelah Promise siap dari `startViewTransition` diselesaikan, React kemudian akan mengembalikan `view-transition-name`. Kemudian React akan memanggil callback `onEnter`, `onExit`, `onUpdate` dan `onShare` untuk memungkinkan kontrol programatik manual atas Animasi. Ini akan terjadi setelah yang bawaan default sudah dihitung. -If a `flushSync` happens to get in the middle of this sequence, then React will skip the Transition since it relies on being able to complete synchronously. +Jika `flushSync` terjadi di tengah urutan ini, maka React akan melewatkan Transisi karena bergantung pada penyelesaian secara sinkron. -After the finished Promise of the `startViewTransition` is resolved, React will then invoke `useEffect`. This prevents those from interfering with the performance of the Animation. However, this is not a guarantee because if another `setState` happens while the Animation is running it'll still have to invoke the `useEffect` earlier to preserve the sequential guarantees. +Setelah Promise selesai dari `startViewTransition` diselesaikan, React kemudian akan memanggil `useEffect`. Ini mencegah mereka mengganggu kinerja Animasi. Namun, ini bukan jaminan karena jika `setState` lain terjadi saat Animasi berjalan, itu masih harus memanggil `useEffect` lebih awal untuk menjaga jaminan berurutan. #### Props {/*props*/} -By default, `` animates with a smooth cross-fade. You can customize the animation, or specify a shared element transition, with these props: +Secara default, `` menganimasikan dengan cross-fade yang halus. Anda dapat menyesuaikan animasi, atau menentukan transisi elemen bersama, dengan prop ini: -* **optional** `enter`: A string or object. The [View Transition Class](#view-transition-class) to apply when enter is activated. -* **optional** `exit`: A string or object. The [View Transition Class](#view-transition-class) to apply when exit is activated. -* **optional** `update`: A string or object. The [View Transition Class](#view-transition-class) to apply when an update is activated. -* **optional** `share`: A string or object. The [View Transition Class](#view-transition-class) to apply when a shared element is activated. -* **optional** `default`: A string or object. The [View Transition Class](#view-transition-class) used when no other matching activation prop is found. -* **optional** `name`: A string or object. The name of the View Transition used for shared element transitions. If not provided, React will use a unique name for each View Transition to prevent unexpected animations. +* **opsional** `enter`: String atau objek. [Kelas Transisi Tampilan](#view-transition-class) yang diterapkan saat enter diaktifkan. +* **opsional** `exit`: String atau objek. [Kelas Transisi Tampilan](#view-transition-class) yang diterapkan saat exit diaktifkan. +* **opsional** `update`: String atau objek. [Kelas Transisi Tampilan](#view-transition-class) yang diterapkan saat update diaktifkan. +* **opsional** `share`: String atau objek. [Kelas Transisi Tampilan](#view-transition-class) yang diterapkan saat elemen bersama diaktifkan. +* **opsional** `default`: String atau objek. [Kelas Transisi Tampilan](#view-transition-class) yang digunakan saat tidak ada prop aktivasi yang cocok ditemukan. +* **opsional** `name`: String atau objek. Nama Transisi Tampilan yang digunakan untuk transisi elemen bersama. Jika tidak disediakan, React akan menggunakan nama unik untuk setiap View Transition untuk mencegah animasi yang tidak diharapkan. #### Callback {/*events*/} -These callbacks allow you to adjust the animation imperatively using the [animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) APIs: +Callback ini memungkinkan Anda untuk menyesuaikan animasi secara imperatif menggunakan API [animate](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate): -* **optional** `onEnter`: A function. React calls `onEnter` after an "enter" animation. -* **optional** `onExit`: A function. React calls `onExit` after an "exit" animation. -* **optional** `onShare`: A function. React calls `onShare` after a "share" animation. -* **optional** `onUpdate`: A function. React calls `onUpdate` after an "update" animation. +* **opsional** `onEnter`: Fungsi. React memanggil `onEnter` setelah animasi "enter". +* **opsional** `onExit`: Fungsi. React memanggil `onExit` setelah animasi "exit". +* **opsional** `onShare`: Fungsi. React memanggil `onShare` setelah animasi "share". +* **opsional** `onUpdate`: Fungsi. React memanggil `onUpdate` setelah animasi "update". -Each callback receives as arguments: -- `element`: The DOM element that was animated. -- `types`: The [Transition Types](/reference/react/addTransitionType) included in the animation. +Setiap callback menerima sebagai argumen: +- `element`: Elemen DOM yang dianimasikan. +- `types`: [Jenis Transisi](/reference/react/addTransitionType) yang termasuk dalam animasi. -### View Transition Class {/*view-transition-class*/} +### Kelas Transisi Tampilan {/*view-transition-class*/} -The View Transition Class is the CSS class name(s) applied by React during the transition when the ViewTransition activates. It can be a string or an object. -- `string`: the `class` added on the child elements when activated. If `'none'` is provided, no class will be added. -- `object`: the class added on the child elements will be the key matching View Transition type added with `addTransitionType`. The object can also specify a `default` to use if no matching type is found. +Kelas Transisi Tampilan adalah nama kelas CSS yang diterapkan oleh React selama transisi saat ViewTransition diaktifkan. Ini bisa berupa string atau objek. +- `string`: `class` yang ditambahkan pada elemen anak saat diaktifkan. Jika `'none'` disediakan, tidak ada kelas yang akan ditambahkan. +- `object`: kelas yang ditambahkan pada elemen anak akan menjadi kunci yang cocok dengan jenis Transisi Tampilan yang ditambahkan dengan `addTransitionType`. Objek juga dapat menentukan `default` untuk digunakan jika tidak ada jenis yang cocok ditemukan. -The value `'none'` can be used to prevent a View Transition from activating for a specific trigger. +Nilai `'none'` dapat digunakan untuk mencegah Transisi Tampilan diaktifkan untuk pemicu tertentu. -### Styling View Transitions {/*styling-view-transitions*/} +### Membuat Gaya Transisi Tampilan {/*styling-view-transitions*/} -In many early examples of View Transitions around the web, you'll have seen using a [`view-transition-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name) and then style it using `::view-transition-...(my-name)` selectors. We don't recommend that for styling. Instead, we normally recommend using a View Transition Class instead. +Dalam banyak contoh awal Transisi Tampilan di sekitar web, Anda mungkin telah melihat menggunakan [`view-transition-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name) dan kemudian membuat gayanya menggunakan pemilih `::view-transition-...(my-name)`. Kami tidak merekomendasikan itu untuk membuat gaya. Sebaliknya, kami biasanya merekomendasikan menggunakan Kelas Transisi Tampilan sebagai gantinya. -To customize the animation for a `` you can provide a View Transition Class to one of the activation props. The View Transition Class is a CSS class name that React applies to the child elements when the ViewTransition activates. +Untuk menyesuaikan animasi untuk ``, Anda dapat menyediakan Kelas Transisi Tampilan ke salah satu prop aktivasi. Kelas Transisi Tampilan adalah nama kelas CSS yang diterapkan React ke elemen anak saat ViewTransition diaktifkan. -For example, to customize an "enter" animation, provide a class name to the `enter` prop: +Misalnya, untuk menyesuaikan animasi "enter", berikan nama kelas ke prop `enter`: ```js ``` -When the `` activates an "enter" animation, React will add the class name `slide-in`. Then you can refer to this class using [view transition pseudo selectors](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#pseudo-elements) to build reusable animations: +Ketika `` mengaktifkan animasi "enter", React akan menambahkan nama kelas `slide-in`. Kemudian Anda dapat merujuk ke kelas ini menggunakan [pemilih pseudo transisi tampilan](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#pseudo-elements) untuk membangun animasi yang dapat digunakan kembali: ```css ::view-transition-group(.slide-in) { @@ -139,23 +139,23 @@ When the `` activates an "enter" animation, React will add the c } ``` -In the future, CSS libraries may add built-in animations using View Transition Classes to make this easier to use. +Di masa depan, pustaka CSS mungkin menambahkan animasi bawaan menggunakan Kelas Transisi Tampilan untuk membuat ini lebih mudah digunakan. -#### Caveats {/*caveats*/} +#### Peringatan {/*caveats*/} -- By default, `setState` updates immediately and does not activate ``, only updates wrapped in a [Transition](/reference/react/useTransition). You can also use [``](/reference/react/Suspense) to opt-in to a Transition to [reveal content](/link-to-suspense-below). -- `` creates an image that can be moved around, scaled and cross-faded. Unlike Layout Animations you may have seen in React Native or Motion, this means that not every individual Element inside of it animates its position. This can lead to better performance and a more continuous feeling, smooth animation compared to animating every individual piece. However, it can also lose continuity in things that should be moving by themselves. So you might have to add more `` boundaries manually as a result. -- Many users may prefer not having animations on the page. React doesn't automatically disable animations for this case. We recommend that using the `@media (prefers-reduced-motion)` media query to disable animations or tone them down based on user preference. In the future, CSS libraries may have this built-in to their presets. -- Currently, `` only works in the DOM. We're working on adding support for React Native and other platforms. +- Secara default, pembaruan `setState` segera dan tidak mengaktifkan ``, hanya pembaruan yang dibungkus dalam [Transisi](/reference/react/useTransition). Anda juga dapat menggunakan [``](/reference/react/Suspense) untuk ikut serta dalam Transisi untuk [mengungkap konten](/link-to-suspense-below). +- `` membuat gambar yang dapat dipindahkan, diskalakan, dan cross-faded. Tidak seperti Animasi Tata Letak yang mungkin Anda lihat di React Native atau Motion, ini berarti bahwa tidak setiap Elemen individu di dalamnya menganimasikan posisinya. Ini dapat menghasilkan kinerja yang lebih baik dan animasi yang lebih halus dan berkelanjutan dibandingkan dengan menganimasikan setiap bagian individu. Namun, ini juga dapat kehilangan kesinambungan dalam hal-hal yang seharusnya bergerak sendiri. Jadi Anda mungkin harus menambahkan batas `` lebih banyak secara manual sebagai hasilnya. +- Banyak pengguna mungkin lebih suka tidak memiliki animasi di halaman. React tidak secara otomatis menonaktifkan animasi untuk kasus ini. Kami merekomendasikan menggunakan query media `@media (prefers-reduced-motion)` untuk menonaktifkan animasi atau menguranginya berdasarkan preferensi pengguna. Di masa depan, pustaka CSS mungkin memiliki ini bawaan di preset mereka. +- Saat ini, `` hanya berfungsi di DOM. Kami sedang mengerjakan menambahkan dukungan untuk React Native dan platform lainnya. --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Animating an element on enter/exit {/*animating-an-element-on-enter*/} +### Menganimasikan elemen pada enter/exit {/*animating-an-element-on-enter*/} -Enter/Exit Transitions trigger when a `` is added or removed by a component in a transition: +Transisi Enter/Exit dipicu ketika `` ditambahkan atau dihapus oleh komponen dalam transisi: ```js function Child() { @@ -171,9 +171,9 @@ function Parent() { } ``` -When `setShow` is called, `show` switches to `true` and the `Child` component is rendered. When `setShow` is called inside `startTransition`, and `Child` renders a `ViewTransition` before any other DOM nodes, an `enter` animation is triggered. +Ketika `setShow` dipanggil, `show` beralih ke `true` dan komponen `Child` dirender. Ketika `setShow` dipanggil di dalam `startTransition`, dan `Child` merender `ViewTransition` sebelum node DOM lainnya, animasi `enter` dipicu. -When `show` switches back to `false`, an `exit` animation is triggered. +Ketika `show` beralih kembali ke `false`, animasi `exit` dipicu. @@ -348,7 +348,7 @@ button:hover { -`` only activates if it is placed before any DOM node. If `Child` instead looked like this, no animation would trigger: +`` hanya diaktifkan jika ditempatkan sebelum node DOM apa pun. Jika `Child` terlihat seperti ini, tidak ada animasi yang akan dipicu: ```js [3, 5] function Component() { @@ -363,9 +363,9 @@ function Component() { --- -### Animating a shared element {/*animating-a-shared-element*/} +### Menganimasikan elemen bersama {/*animating-a-shared-element*/} -Normally, we don't recommend assigning a name to a `` and instead let React assign it an automatic name. The reason you might want to assign a name is to animate between completely different components when one tree unmounts and another tree mounts at the same time. To preserve continuity. +Biasanya, kami tidak merekomendasikan menetapkan nama ke `` dan sebaliknya membiarkan React menetapkan nama otomatis. Alasan Anda mungkin ingin menetapkan nama adalah untuk menganimasikan antara komponen yang sepenuhnya berbeda ketika satu pohon unmount dan pohon lainnya mount pada saat yang sama. Untuk menjaga kesinambungan. ```js @@ -373,11 +373,11 @@ Normally, we don't recommend assigning a name to a `` and instea ``` -When one tree unmounts and another mounts, if there's a pair where the same name exists in the unmounting tree and the mounting tree, they trigger the "share" animation on both. It animates from the unmounting side to the mounting side. +Ketika satu pohon unmount dan yang lain mount, jika ada pasangan di mana nama yang sama ada di pohon yang unmount dan pohon yang mount, mereka memicu animasi "share" di keduanya. Ini menganimasikan dari sisi yang unmount ke sisi yang mount. -Unlike an exit/enter animation this can be deeply inside the deleted/mounted tree. If a `` would also be eligible for exit/enter, then the "share" animation takes precedence. +Tidak seperti animasi exit/enter, ini dapat berada jauh di dalam pohon yang dihapus/dimount. Jika `` juga memenuhi syarat untuk exit/enter, maka animasi "share" lebih diutamakan. -If Transition first unmounts one side and then leads to a `` fallback being shown before eventually the new name being mounted, then no shared element transition happens. +Jika Transisi pertama unmount satu sisi dan kemudian menyebabkan fallback `` ditampilkan sebelum akhirnya nama baru dimount, maka tidak ada transisi elemen bersama yang terjadi. @@ -594,17 +594,17 @@ button:hover { -If either the mounted or unmounted side of a pair is outside the viewport, then no pair is formed. This ensures that it doesn't fly in or out of the viewport when something is scrolled. Instead it's treated as a regular enter/exit by itself. +Jika salah satu sisi yang dipasang atau tidak dipasang dari pasangan berada di luar viewport, maka tidak ada pasangan yang dibentuk. Ini memastikan bahwa itu tidak terbang masuk atau keluar dari viewport ketika sesuatu digulir. Sebaliknya itu diperlakukan sebagai enter/exit reguler dengan sendirinya. -This does not happen if the same Component instance changes position, which triggers an "update". Those animate regardless if one position is outside the viewport. +Ini tidak terjadi jika instance Komponen yang sama mengubah posisi, yang memicu "update". Mereka menganimasikan terlepas dari apakah satu posisi berada di luar viewport. -There's currently a quirk where if a deeply nested unmounted `` is inside the viewport but the mounted side is not within the viewport, then the unmounted side animates as its own "exit" animation even if it's deeply nested instead of as part of the parent animation. +Saat ini ada quirk di mana jika `` yang tidak dipasang bersarang dalam berada di dalam viewport tetapi sisi yang dipasang tidak berada dalam viewport, maka sisi yang tidak dipasang menganimasikan sebagai animasi "exit" sendiri bahkan jika bersarang dalam alih-alih sebagai bagian dari animasi induk. -It's important that there's only one thing with the same name mounted at a time in the entire app. Therefore it's important to use unique namespaces for the name to avoid conflicts. To ensure you can do this you might want to add a constant in a separate module that you import. +Penting bahwa hanya ada satu hal dengan nama yang sama yang dipasang pada satu waktu di seluruh aplikasi. Oleh karena itu penting untuk menggunakan namespace unik untuk nama untuk menghindari konflik. Untuk memastikan Anda dapat melakukan ini, Anda mungkin ingin menambahkan konstanta di modul terpisah yang Anda impor. ```js export const MY_NAME = "my-globally-unique-name"; @@ -618,16 +618,16 @@ import {MY_NAME} from './shared-name'; --- -### Animating reorder of items in a list {/*animating-reorder-of-items-in-a-list*/} +### Menganimasikan penyusunan ulang item dalam daftar {/*animating-reorder-of-items-in-a-list*/} ```js items.map(item => ) ``` -When reordering a list, without updating the content, the "update" animation triggers on each `` in the list if they're outside a DOM node. Similar to enter/exit animations. +Ketika menyusun ulang daftar, tanpa memperbarui konten, animasi "update" memicu pada setiap `` dalam daftar jika mereka berada di luar node DOM. Mirip dengan animasi enter/exit. -This means that this will trigger the animation on this ``: +Ini berarti bahwa ini akan memicu animasi pada `` ini: ```js function Component() { @@ -1041,27 +1041,27 @@ This means you might want to avoid wrapper elements in lists where you want to a items.map(item =>
) ``` -The above rule also applies if one of the items updates to resize, which then causes the siblings to resize, it'll also animate its sibling `` but only if they're immediate siblings. +Aturan di atas juga berlaku jika salah satu item diperbarui untuk mengubah ukuran, yang kemudian menyebabkan saudara mengubah ukuran, itu juga akan menganimasikan `` saudaranya tetapi hanya jika mereka saudara langsung. -This means that during an update, which causes a lot of re-layout, it doesn't individually animate every `` on the page. That would lead to a lot of noisy animations which distracts from the actual change. Therefore React is more conservative about when an individual animation triggers. +Ini berarti bahwa selama update, yang menyebabkan banyak re-layout, itu tidak menganimasikan setiap `` di halaman secara individual. Itu akan menyebabkan banyak animasi bising yang mengalihkan perhatian dari perubahan sebenarnya. Oleh karena itu React lebih konservatif tentang kapan animasi individual dipicu. -It's important to properly use keys to preserve identity when reordering lists. It might seem like you could use "name", shared element transitions, to animate reorders but that would not trigger if one side was outside the viewport. To animate a reorder you often want to show that it went to a position outside the viewport. +Penting untuk menggunakan kunci dengan benar untuk menjaga identitas saat menyusun ulang daftar. Mungkin terlihat seperti Anda bisa menggunakan "name", transisi elemen bersama, untuk menganimasikan penyusunan ulang tetapi itu tidak akan dipicu jika satu sisi berada di luar viewport. Untuk menganimasikan penyusunan ulang, Anda sering ingin menunjukkan bahwa itu pergi ke posisi di luar viewport. --- -### Animating from Suspense content {/*animating-from-suspense-content*/} +### Menganimasikan dari konten Suspense {/*animating-from-suspense-content*/} -Just like any Transition, React waits for data and new CSS (``) before running the animation. In addition to this, ViewTransitions also wait up to 500ms for new fonts to load before starting the animation to avoid them flickering in later. For the same reason, an image wrapped in ViewTransition will wait for the image to load. +Sama seperti Transisi apa pun, React menunggu data dan CSS baru (``) sebelum menjalankan animasi. Selain itu, ViewTransitions juga menunggu hingga 500ms untuk font baru dimuat sebelum memulai animasi untuk menghindari mereka berkedip nanti. Untuk alasan yang sama, gambar yang dibungkus dalam ViewTransition akan menunggu gambar dimuat. -If it's inside a new Suspense boundary instance, then the fallback is shown first. After the Suspense boundary fully loads, it triggers the `` to animate the reveal to the content. +Jika itu di dalam instance batas Suspense baru, maka fallback ditampilkan terlebih dahulu. Setelah batas Suspense sepenuhnya dimuat, itu memicu `` untuk menganimasikan pengungkapan ke konten. -Currently, this only happens for client-side Transition. In the future, this will also animate Suspense boundary for streaming SSR when content from the server suspends during the initial load. +Saat ini, ini hanya terjadi untuk Transisi sisi klien. Di masa depan, ini juga akan menganimasikan batas Suspense untuk streaming SSR ketika konten dari server menangguhkan selama pemuatan awal. -There are two ways to animate Suspense boundaries depending on where you place the ``: +Ada dua cara untuk menganimasikan batas Suspense tergantung di mana Anda menempatkan ``: Update: @@ -1072,7 +1072,7 @@ Update: ``` -In this scenario when the content goes from A to B, it'll be treated as an "update" and apply that class if appropriate. Both A and B will get the same view-transition-name and therefore they're acting as a cross-fade by default. +Dalam skenario ini ketika konten pergi dari A ke B, itu akan diperlakukan sebagai "update" dan menerapkan kelas itu jika sesuai. Baik A dan B akan mendapatkan view-transition-name yang sama dan oleh karena itu mereka bertindak sebagai cross-fade secara default. @@ -1308,16 +1308,16 @@ Enter/Exit: ``` -In this scenario, these are two separate ViewTransition instances each with their own `view-transition-name`. This will be treated as an "exit" of the `` and an "enter" of the ``. +Dalam skenario ini, ini adalah dua instance ViewTransition terpisah masing-masing dengan `view-transition-name` sendiri. Ini akan diperlakukan sebagai "exit" dari `` dan "enter" dari ``. -You can achieve different effects depending on where you choose to place the `` boundary. +Anda dapat mencapai efek berbeda tergantung di mana Anda memilih untuk menempatkan batas ``. --- -### Opting-out of an animation {/*opting-out-of-an-animation*/} +### Memilih keluar dari animasi {/*opting-out-of-an-animation*/} -Sometimes you're wrapping a large existing component, like a whole page, and you want to animate some updates, such as changing the theme. However, you don't want it to opt-in all updates inside the whole page to cross-fade when they're updating. Especially if you're incrementally adding more animations. +Terkadang Anda membungkus komponen yang ada yang besar, seperti seluruh halaman, dan Anda ingin menganimasikan beberapa pembaruan, seperti mengubah tema. Namun, Anda tidak ingin itu ikut serta semua pembaruan di dalam seluruh halaman untuk cross-fade ketika mereka memperbarui. Terutama jika Anda menambahkan lebih banyak animasi secara bertahap. -You can use the class "none" to opt-out of an animation. By wrapping your children in a "none" you can disable animations for updates to them while the parent still triggers. +Anda dapat menggunakan kelas "none" untuk memilih keluar dari animasi. Dengan membungkus anak-anak Anda dalam "none" Anda dapat menonaktifkan animasi untuk pembaruan pada mereka sementara induk masih memicu. ```js @@ -1329,17 +1329,17 @@ You can use the class "none" to opt-out of an animation. By wrapping your childr ``` -This will only animate if the theme changes and not if only the children update. The children can still opt-in again with their own `` but at least it's manual again. +Ini hanya akan menganimasikan jika tema berubah dan tidak jika hanya anak-anak yang diperbarui. Anak-anak masih dapat ikut serta lagi dengan `` sendiri tetapi setidaknya itu manual lagi. --- -### Customizing animations {/*customizing-animations*/} +### Menyesuaikan animasi {/*customizing-animations*/} -By default, `` includes the default cross-fade from the browser. +Secara default, `` menyertakan cross-fade default dari browser. -To customize animations, you can provide props to the `` component to specify which animations to use, based on how the `` activates. +Untuk menyesuaikan animasi, Anda dapat menyediakan prop ke komponen `` untuk menentukan animasi mana yang akan digunakan, berdasarkan bagaimana `` diaktifkan. -For example, we can slow down the default cross fade animation: +Misalnya, kita dapat memperlambat animasi cross fade default: ```js @@ -1347,7 +1347,7 @@ For example, we can slow down the default cross fade animation: ``` -And define slow-fade in CSS using view transition classes: +Dan tentukan slow-fade di CSS menggunakan kelas transisi tampilan: ```css ::view-transition-old(.slow-fade) { @@ -1538,7 +1538,7 @@ button:hover { -In addition to setting the `default`, you can also provide configurations for `enter`, `exit`, `update`, and `share` animations. +Selain menetapkan `default`, Anda juga dapat menyediakan konfigurasi untuk animasi `enter`, `exit`, `update`, dan `share`. @@ -1790,10 +1790,10 @@ button:hover { -### Customizing animations with types {/*customizing-animations-with-types*/} -You can use the [`addTransitionType`](/reference/react/addTransitionType) API to add a class name to the child elements when a specific transition type is activated for a specific activation trigger. This allows you to customize the animation for each type of transition. +### Menyesuaikan animasi dengan jenis {/*customizing-animations-with-types*/} +Anda dapat menggunakan API [`addTransitionType`](/reference/react/addTransitionType) untuk menambahkan nama kelas ke elemen anak ketika jenis transisi tertentu diaktifkan untuk pemicu aktivasi tertentu. Ini memungkinkan Anda untuk menyesuaikan animasi untuk setiap jenis transisi. -For example, to customize the animation for all forward and backward navigations: +Misalnya, untuk menyesuaikan animasi untuk semua navigasi maju dan mundur: ```js { }); ``` -When the ViewTransition activates a "navigation-back" animation, React will add the class name "slide-right". When the ViewTransition activates a "navigation-forward" animation, React will add the class name "slide-left". +Ketika ViewTransition mengaktifkan animasi "navigation-back", React akan menambahkan nama kelas "slide-right". Ketika ViewTransition mengaktifkan animasi "navigation-forward", React akan menambahkan nama kelas "slide-left". -In the future, routers and other libraries may add support for standard view-transition types and styles. +Di masa depan, router dan pustaka lainnya mungkin menambahkan dukungan untuk jenis dan gaya transisi tampilan standar. @@ -2119,19 +2119,19 @@ button:hover { -### Building View Transition enabled routers {/*building-view-transition-enabled-routers*/} +### Membangun router yang mendukung Transisi Tampilan {/*building-view-transition-enabled-routers*/} -React waits for any pending Navigation to finish to ensure that scroll restoration happens within the animation. If the Navigation is blocked on React, your router must unblock in `useLayoutEffect` since `useEffect` would lead to a deadlock. +React menunggu Navigasi tertunda selesai untuk memastikan bahwa pemulihan gulir terjadi dalam animasi. Jika Navigasi diblokir pada React, router Anda harus membuka blokir di `useLayoutEffect` karena `useEffect` akan menyebabkan deadlock. -If a `startTransition` is started from the legacy popstate event, such as during a "back"-navigation then it must finish synchronously to ensure scroll and form restoration works correctly. This is in conflict with running a View Transition animation. Therefore, React will skip animations from popstate. Therefore animations won't run for the back button. You can fix this by upgrading your router to use the Navigation API. +Jika `startTransition` dimulai dari event popstate lama, seperti selama navigasi "back", maka itu harus selesai secara sinkron untuk memastikan pemulihan gulir dan formulir bekerja dengan benar. Ini bertentangan dengan menjalankan animasi Transisi Tampilan. Oleh karena itu, React akan melewatkan animasi dari popstate. Oleh karena itu animasi tidak akan berjalan untuk tombol back. Anda dapat memperbaikinya dengan meningkatkan router Anda untuk menggunakan Navigation API. --- -## Troubleshooting {/*troubleshooting*/} +## Pemecahan Masalah {/*troubleshooting*/} -### My `` is not activating {/*my-viewtransition-is-not-activating*/} +### `` saya tidak diaktifkan {/*my-viewtransition-is-not-activating*/} -`` only activates if it is placed is before any DOM node: +`` hanya diaktifkan jika ditempatkan sebelum node DOM apa pun: ```js [3, 5] function Component() { @@ -2143,7 +2143,7 @@ function Component() { } ``` -To fix, ensure that the `` comes before any other DOM nodes: +Untuk memperbaiki, pastikan bahwa `` datang sebelum node DOM lainnya: ```js [3, 5] function Component() { @@ -2155,14 +2155,14 @@ function Component() { } ``` -### I'm getting an error "There are two `` components with the same name mounted at the same time." {/*two-viewtransition-with-same-name*/} +### Saya mendapatkan error "There are two `` components with the same name mounted at the same time." {/*two-viewtransition-with-same-name*/} -This error occurs when two `` components with the same `name` are mounted at the same time: +Error ini terjadi ketika dua komponen `` dengan `name` yang sama dipasang pada saat yang sama: ```js [3] function Item() { - // 🚩 All items will get the same "name". + // 🚩 Semua item akan mendapatkan "name" yang sama. return ...; } @@ -2175,7 +2175,7 @@ function ItemList({items}) { } ``` -This will cause the View Transition to error. In development, React detects this issue to surface it and logs two errors: +Ini akan menyebabkan View Transition error. Dalam pengembangan, React mendeteksi masalah ini untuk menampilkannya dan mencatat dua error: @@ -2195,11 +2195,11 @@ The existing `` duplicate has this stack trace. -To fix, ensure that there's only one `` with the same name mounted at a time in the entire app by ensuring the `name` is unique, or adding an `id` to the name: +Untuk memperbaiki, pastikan bahwa hanya ada satu `` dengan nama yang sama yang dipasang pada satu waktu di seluruh aplikasi dengan memastikan `name` unik, atau menambahkan `id` ke nama: ```js [3] function Item({id}) { - // ✅ All items will get the same "name". + // ✅ Semua item akan mendapatkan "name" yang sama. return ...; }