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
+31-31Lines changed: 31 additions & 31 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,15 +5,15 @@ version: canary
5
5
6
6
<Canary>
7
7
8
-
**The `addTransitionType`API is currently only available in React’s Canary and Experimental channels.**
8
+
**A API `addTransitionType`está atualmente disponível apenas nos canais Canary e Experimental do React.**
9
9
10
-
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
10
+
[Saiba mais sobre os canais de lançamento do React aqui.](/community/versioning-policy#all-release-channels)
11
11
12
12
</Canary>
13
13
14
14
<Intro>
15
15
16
-
`addTransitionType`lets you specify the cause of a transition.
16
+
`addTransitionType`permite que você especifique a causa de uma transição.
17
17
18
18
19
19
```js
@@ -29,32 +29,32 @@ startTransition(() => {
29
29
30
30
---
31
31
32
-
## Reference {/*reference*/}
32
+
## Referência {/*reference*/}
33
33
34
34
### `addTransitionType` {/*addtransitiontype*/}
35
35
36
-
#### Parameters {/*parameters*/}
36
+
#### Parâmetros {/*parameters*/}
37
37
38
-
-`type`: The type of transition to add. This can be any string.
38
+
-`type`: O tipo de transição a ser adicionado. Pode ser qualquer string.
39
39
40
-
#### Returns {/*returns*/}
40
+
#### Retorna {/*returns*/}
41
41
42
-
`addTransitionType`does not return anything.
42
+
`addTransitionType`não retorna nada.
43
43
44
-
#### Caveats {/*caveats*/}
44
+
#### Ressalvas {/*caveats*/}
45
45
46
-
-If multiple transitions are combined, all Transition Types are collected. You can also add more than one type to a Transition.
47
-
-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.
46
+
-Se múltiplas transições forem combinadas, todos os Tipos de Transição são coletados. Você também pode adicionar mais de um tipo a uma Transição.
47
+
-Os Tipos de Transição são redefinidos após cada commit. Isso significa que um fallback de `<Suspense>`associará os tipos após um `startTransition`, mas a revelação do conteúdo não.
48
48
49
49
---
50
50
51
-
## Usage {/*usage*/}
51
+
## Uso {/*usage*/}
52
52
53
-
### Adding the cause of a transition {/*adding-the-cause-of-a-transition*/}
53
+
### Adicionando a causa de uma transição {/*adding-the-cause-of-a-transition*/}
54
54
55
-
Call`addTransitionType`inside of`startTransition`to indicate the cause of a transition:
55
+
Chame`addTransitionType`dentro de`startTransition`para indicar a causa de uma transição:
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.
73
+
Quando você chama <CodeStep step={1}>addTransitionType</CodeStep> dentro do escopo de <CodeStep step={2}>startTransition</CodeStep>, o React associará <CodeStep step={3}>submit-click</CodeStep> como uma das causas para a Transição.
74
74
75
-
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:
75
+
Atualmente, os Tipos de Transição podem ser usados para personalizar diferentes animações com base no que causou a Transição. Você tem três maneiras diferentes de escolher como usá-los:
76
76
77
-
-[Customize animations using browser view transition types](#customize-animations-using-browser-view-transition-types)
78
-
-[Customize animations using `View Transition` Class](#customize-animations-using-view-transition-class)
79
-
-[Customize animations using `ViewTransition` events](#customize-animations-using-viewtransition-events)
77
+
- [Personalizar animações usando tipos de transição de visualização do navegador](#customize-animations-using-browser-view-transition-types)
78
+
- [Personalizar animações usando a Classe `View Transition`](#customize-animations-using-view-transition-class)
In the future, we plan to support more use cases for using the cause of a transition.
81
+
No futuro, planejamos dar suporte a mais casos de uso para a causa de uma transição.
82
82
83
83
---
84
-
### Customize animations using browser view transition types {/*customize-animations-using-browser-view-transition-types*/}
84
+
### Personalizar animações usando tipos de transição de visualização do navegador {/*customize-animations-using-browser-view-transition-types*/}
85
85
86
-
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.
86
+
Quando uma [`ViewTransition`](/reference/react/ViewTransition) é ativada a partir de uma transição, o React adiciona todos os Tipos de Transição como [tipos de transição de visualização](https://www.w3.org/TR/css-view-transitions-2/#active-view-transition-pseudo-examples) do navegador ao elemento.
87
87
88
-
This allows you to customize different animations based on CSS scopes:
88
+
Isso permite que você personalize diferentes animações com base em escopos CSS:
89
89
90
90
```js [11]
91
91
functionComponent() {
@@ -112,9 +112,9 @@ startTransition(() => {
112
112
113
113
---
114
114
115
-
### Customize animations using `View Transition` Class {/*customize-animations-using-view-transition-class*/}
115
+
### Personalizar animações usando a Classe `View Transition` {/*customize-animations-using-view-transition-class*/}
116
116
117
-
You can customize animations for an activated `ViewTransition`based on type by passing an object to the View Transition Class:
117
+
Você pode personalizar animações para uma `ViewTransition`ativada com base no tipo, passando um objeto para a Classe View Transition:
118
118
119
119
```js
120
120
functionComponent() {
@@ -134,9 +134,9 @@ startTransition(() => {
134
134
});
135
135
```
136
136
137
-
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).
137
+
Se múltiplos tipos corresponderem, eles serão unidos. Se nenhum tipo corresponder, a entrada especial "default" será usada em vez disso. Se algum tipo tiver o valor "none", ele prevalecerá e a ViewTransition será desabilitada (não terá um nome atribuído).
138
138
139
-
These can be combined with enter/exit/update/layout/share props to match based on kind of trigger and Transition Type.
139
+
Estes podem ser combinados com as props enter/exit/update/layout/share para corresponder com base no tipo de gatilho e Tipo de Transição.
140
140
141
141
```js
142
142
<ViewTransition enter={{
@@ -151,9 +151,9 @@ exit={{
151
151
152
152
---
153
153
154
-
### Customize animations using `ViewTransition` events {/*customize-animations-using-viewtransition-events*/}
0 commit comments