You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/addTransitionType.md
+28-29Lines changed: 28 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,8 +19,7 @@ Versi eksperimental React mungkin mengandung bug. Jangan menggunakannya dalam pr
19
19
20
20
<Intro>
21
21
22
-
`unstable_addTransitionType` lets you specify the cause of a transition.
23
-
22
+
`unstable_addTransitionType` memungkinkan Anda untuk menentukan penyebab dari suatu transisi.
24
23
25
24
```js
26
25
startTransition(() => {
@@ -35,32 +34,32 @@ startTransition(() => {
35
34
36
35
---
37
36
38
-
## Reference {/*reference*/}
37
+
## Referensi {/*reference*/}
39
38
40
39
### `addTransitionType` {/*addtransitiontype*/}
41
40
42
-
#### Parameters {/*parameters*/}
41
+
#### Parameter {/*parameters*/}
43
42
44
-
-`type`: The type of transition to add. This can be any string.
43
+
-`type`: Tipe transisi yang akan ditambahkan. Ini dapat berupa string apa pun.
45
44
46
-
#### Returns {/*returns*/}
45
+
#### Kembalian {/*returns*/}
47
46
48
-
`startTransition` does not return anything.
47
+
`addTransitionType` tidak mengembalikan apa pun.
49
48
50
49
#### Caveats {/*caveats*/}
51
50
52
-
-If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a Transition.
53
-
-Transition Types are reset after each commit. This means a`<Suspense>`fallback will associate the types after a `startTransition`, but revealing the content does not.
51
+
-Jika beberapa transisi digabungkan, semua Tipe Transisi akan dikumpulkan. Anda juga dapat menambahkan lebih dari satu tipe ke dalam sebuah Transisi.
52
+
-Tipe Transisi diatur ulang setiap kali *commit*. Ini berarti *fallback*`<Suspense>`akan mengasosiasikan tipe setelah `startTransition`, namun menampilkan konten tidak demikian.
54
53
55
54
---
56
55
57
-
## Usage {/*usage*/}
56
+
## Penggunaan {/*usage*/}
58
57
59
-
### Adding the cause of a transition {/*adding-the-cause-of-a-transition*/}
When you call <CodeStepstep={1}>addTransitionType</CodeStep> inside the scope of <CodeStepstep={2}>startTransition</CodeStep>, React will associate <CodeStepstep={3}>submit-click</CodeStep> as one of the causes for the Transition.
78
+
Saat Anda memanggil <CodeStep step={1}>addTransitionType</CodeStep> di dalam cakupan <CodeStep step={2}>startTransition</CodeStep>, React akan mengasosiasikan <CodeStep step={3}>submit-click</CodeStep> sebagai salah satu penyebab Transisi tersebut.
80
79
81
-
Currently, Transition Types can be used to customize different animations based on what caused the Transition. You have three different ways to choose from for how to use them:
80
+
Saat ini, Tipe Transisi dapat digunakan untuk menyesuaikan animasi yang berbeda berdasarkan apa yang menyebabkan Transisi tersebut. Anda memiliki tiga cara berbeda yang dapat dipilih untuk menggunakannya:
82
81
83
-
-[Customize animations using browser view transition types](#customize-animations-using-browser-view-transition-types)
84
-
-[Customize animations using `View Transition` Class](#customize-animations-using-view-transition-class)
85
-
-[Customize animations using `ViewTransition` events](#customize-animations-using-viewtransition-events)
82
+
- [Menyesuaikan animasi menggunakan tipe transisi tampilan browser](#customize-animations-using-browser-view-transition-types)
83
+
- [Menyesuaikan animasi menggunakan Kelas `View Transition`](#customize-animations-using-view-transition-class)
84
+
- [Menyesuaikan animasi menggunakan event `ViewTransition`](#customize-animations-using-viewtransition-events)
86
85
87
-
In the future, we plan to support more use cases for using the cause of a transition.
86
+
Di masa mendatang, kami berencana untuk mendukung lebih banyak kasus penggunaan untuk menggunakan penyebab transisi.
88
87
89
88
---
90
-
### Customize animations using browser view transition types {/*customize-animations-using-browser-view-transition-types*/}
89
+
### Menyesuaikan animasi menggunakan tipe transisi tampilan browser {/*customize-animations-using-browser-view-transition-types*/}
91
90
92
-
When a [`ViewTransition`](/reference/react/ViewTransition)activates from a transition, React adds all the Transition Types as browser [view transition types](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples)to the element.
91
+
Ketika [`ViewTransition`](/reference/react/ViewTransition) aktif dari sebuah transisi, React menambahkan semua Tipe Transisi sebagai [tipe transisi tampilan](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples) browser ke elemen tersebut.
93
92
94
-
This allows you to customize different animations based on CSS scopes:
93
+
Ini memungkinkan Anda menyesuaikan animasi berbeda berdasarkan cakupan CSS:
95
94
96
95
```js [11]
97
96
functionComponent() {
@@ -118,9 +117,9 @@ startTransition(() => {
118
117
119
118
---
120
119
121
-
### Customize animations using `View Transition` Class {/*customize-animations-using-view-transition-class*/}
120
+
### Menyesuaikan animasi menggunakan Kelas `View Transition` {/*customize-animations-using-view-transition-class*/}
122
121
123
-
You can customize animations for an activated `ViewTransition`based on type by passing an object to the View Transition Class:
122
+
Anda dapat menyesuaikan animasi untuk `ViewTransition`yang diaktifkan berdasarkan tipe dengan meneruskan objek ke Kelas View Transition:
124
123
125
124
```js
126
125
functionComponent() {
@@ -140,9 +139,9 @@ startTransition(() => {
140
139
});
141
140
```
142
141
143
-
If multiple types match, then they're joined together. If no types match then the special "default" entry is used instead. If any type has the value "none" then that wins and the ViewTransition is disabled (not assigned a name).
142
+
Jika beberapa tipe cocok, maka mereka akan digabungkan. Jika tidak ada tipe yang cocok, maka entri khusus "default" yang digunakan. Jika ada tipe yang memiliki nilai "none", maka itu yang akan menang dan ViewTransition dinonaktifkan (tidak diberikan nama).
144
143
145
-
These can be combined with enter/exit/update/layout/share props to match based on kind of trigger and Transition Type.
144
+
Ini dapat dikombinasikan dengan prop enter/exit/update/layout/share untuk mencocokkan berdasarkan jenis pemicu dan Tipe Transisi.
146
145
147
146
```js
148
147
<ViewTransition enter={{
@@ -157,9 +156,9 @@ exit={{
157
156
158
157
---
159
158
160
-
### Customize animations using `ViewTransition` events {/*customize-animations-using-viewtransition-events*/}
159
+
### Menyesuaikan animasi menggunakan event `ViewTransition` {/*customize-animations-using-viewtransition-events*/}
161
160
162
-
You can imperatively customize animations for an activated `ViewTransition`based on type using View Transition events:
161
+
Anda dapat secara imperatif menyesuaikan animasi untuk `ViewTransition`yang diaktifkan berdasarkan tipe menggunakan event View Transition:
163
162
164
163
```
165
164
<ViewTransition onUpdate={(inst, types) => {
@@ -173,7 +172,7 @@ You can imperatively customize animations for an activated `ViewTransition` base
173
172
}}>
174
173
```
175
174
176
-
This allows you to pick different imperative Animations based on the cause.
175
+
Ini memungkinkan Anda untuk memilih Animasi imperatif yang berbeda berdasarkan penyebabnya.
0 commit comments