diff --git a/src/content/reference/react/ViewTransition.md b/src/content/reference/react/ViewTransition.md
index 653a06a63..52b34e384 100644
--- a/src/content/reference/react/ViewTransition.md
+++ b/src/content/reference/react/ViewTransition.md
@@ -5,21 +5,21 @@ version: experimental
-**This API is experimental and is not available in a stable version of React yet.**
+**Esta API é experimental e ainda não está disponível em uma versão estável do React.**
-You can try it by upgrading React packages to the most recent experimental version:
+Você pode experimentá-la atualizando os pacotes do React para a versão experimental mais recente:
- `react@experimental`
- `react-dom@experimental`
- `eslint-plugin-react-hooks@experimental`
-Experimental versions of React may contain bugs. Don't use them in production.
+Versões experimentais do React podem conter erros. Não as utilize em produção.
-`` lets you animate elements that update inside a Transition.
+`` permite animar elementos que são atualizados dentro de uma Transição.
```js
@@ -36,97 +36,97 @@ import {unstable_ViewTransition as ViewTransition} from 'react';
---
-## Reference {/*reference*/}
+## Referência {/*reference*/}
### `` {/*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:
+Envolva elementos em `` para animá-los quando forem atualizados dentro de uma [Transição](/reference/react/useTransition). O React usa as seguintes heurísticas para determinar se uma Transição de Visualização é ativada para uma animação:
-- `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`: Se um `ViewTransition` em si for inserido nesta Transição, ele será ativado.
+- `exit`: Se um `ViewTransition` em si for excluído nesta Transição, ele será ativado.
+- `update`: Se um `ViewTransition` tiver quaisquer mutações no DOM dentro dele que o React esteja realizando (como uma alteração de prop) ou se o próprio limite do `ViewTransition` mudar de tamanho ou posição devido a um irmão imediato. Se houver `ViewTransition` aninhados, a mutação se aplicará a eles e não ao pai.
+- `share`: Se um `ViewTransition` nomeado estiver dentro de uma subárvore excluída e outro `ViewTransition` nomeado com o mesmo nome fizer parte de uma subárvore inserida na mesma Transição, eles formarão uma Transição de Elemento Compartilhado e animarão do excluído para o inserido.
-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)).
+Por padrão, `` anima com um cross-fade suave (a transição de visualização padrão do navegador). Você pode personalizar a animação fornecendo uma [Classe de Transição de Visualização](#view-transition-class) ao componente ``. Você pode personalizar animações para cada tipo de gatilho (veja [Estilizando Transições de Visualização](#styling-view-transitions)).
-#### How does `` work? {/*how-does-viewtransition-work*/}
+#### Como funciona o ``? {/*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.
+Por baixo dos panos, o React aplica `view-transition-name` aos estilos inline do nó DOM mais próximo aninhado dentro do componente ``. Se houver vários nós DOM irmãos como ``, o React adicionará um sufixo ao nome para tornar cada um único, mas conceitualmente eles fazem parte do mesmo. O React não aplica isso de forma antecipada, mas apenas no momento em que o limite deve participar de uma animação.
-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.
+O React chama automaticamente `startViewTransition` por conta própria nos bastidores, então você nunca deve fazer isso sozinho. Na verdade, se houver outra coisa na página executando uma ViewTransition, o React a interromperá. Portanto, é recomendado que você use o próprio React para coordenar essas transições. Se você tinha outras maneiras de acionar ViewTransitions no passado, recomendamos que migre para a maneira integrada.
-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.
+Se outras ViewTransitions do React já estiverem em execução, o React esperará que elas terminem antes de iniciar a próxima. No entanto, é importante notar que se várias atualizações ocorrerem enquanto a primeira estiver em execução, todas elas serão agrupadas em uma única transição. Se você iniciar A->B. Então, enquanto isso, você recebe uma atualização para ir para C e depois para D. Quando a primeira animação A->B terminar, a próxima animará de B->D.
-The `getSnapshotBeforeUpdate` life-cycle will be called before `startViewTransition` and some `view-transition-name` will update at the same time.
+O ciclo de vida `getSnapshotBeforeUpdate` será chamado antes de `startViewTransition` e alguns `view-transition-name` serão atualizados ao mesmo tempo.
-Then React calls `startViewTransition`. Inside the `updateCallback`, React will:
+Em seguida, o React chama `startViewTransition`. Dentro do `updateCallback`, o React:
-- 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.
+- Aplicará suas mutações ao DOM e invocará `useInsertionEffects`.
+- Esperará o carregamento das fontes.
+- Chamará `componentDidMount`, `componentDidUpdate`, `useLayoutEffect` e refs.
+- Esperará a conclusão de qualquer Navegação pendente.
+- Em seguida, o React medirá quaisquer alterações no layout para ver quais limites precisarão ser animados.
-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.
+Após a resolução da Promise `ready` de `startViewTransition`, o React reverterá o `view-transition-name`. Em seguida, o React invocará os callbacks `onEnter`, `onExit`, `onUpdate` e `onShare` para permitir o controle programático manual das Animações. Isso ocorrerá após o cálculo das animações padrão integradas.
-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.
+Se um `flushSync` ocorrer no meio desta sequência, o React pulará a Transição, pois depende de ser capaz de concluir de forma síncrona.
-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.
+Após a resolução da Promise `finished` de `startViewTransition`, o React invocará `useEffect`. Isso evita que eles interfiram no desempenho da Animação. No entanto, isso não é uma garantia, pois se outro `setState` ocorrer enquanto a Animação estiver em execução, ele ainda terá que invocar o `useEffect` mais cedo para preservar as garantias sequenciais.
#### Props {/*props*/}
-By default, `` animates with a smooth cross-fade. You can customize the animation, or specify a shared element transition, with these props:
+Por padrão, `` anima com um cross-fade suave. Você pode personalizar a animação ou especificar uma transição de elemento compartilhado com estas props:
-* **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.
+* **opcional** `enter`: Uma string ou objeto. A [Classe de Transição de Visualização](#view-transition-class) a ser aplicada quando `enter` for ativado.
+* **opcional** `exit`: Uma string ou objeto. A [Classe de Transição de Visualização](#view-transition-class) a ser aplicada quando `exit` for ativado.
+* **opcional** `update`: Uma string ou objeto. A [Classe de Transição de Visualização](#view-transition-class) a ser aplicada quando uma atualização for ativada.
+* **opcional** `share`: Uma string ou objeto. A [Classe de Transição de Visualização](#view-transition-class) a ser aplicada quando um elemento compartilhado for ativado.
+* **opcional** `default`: Uma string ou objeto. A [Classe de Transição de Visualização](#view-transition-class) usada quando nenhuma outra prop de ativação correspondente for encontrada.
+* **opcional** `name`: Uma string ou objeto. O nome da Transição de Visualização usado para transições de elementos compartilhados. Se não for fornecido, o React usará um nome exclusivo para cada Transição de Visualização para evitar animações inesperadas.
-#### Callback {/*events*/}
+#### Callbacks {/*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:
+Esses callbacks permitem ajustar a animação imperativamente usando as APIs [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.
+* **opcional** `onEnter`: Uma função. O React chama `onEnter` após uma animação de "enter".
+* **opcional** `onExit`: Uma função. O React chama `onExit` após uma animação de "exit".
+* **opcional** `onShare`: Uma função. O React chama `onShare` após uma animação de "share".
+* **opcional** `onUpdate`: Uma função. O React chama `onUpdate` após uma animação de "update".
-Each callback receives as arguments:
-- `element`: The DOM element that was animated.
-- `types`: The [Transition Types](/reference/react/addTransitionType) included in the animation.
+Cada callback recebe como argumentos:
+- `element`: O elemento DOM que foi animado.
+- `types`: Os [Tipos de Transição](/reference/react/addTransitionType) incluídos na animação.
-### View Transition Class {/*view-transition-class*/}
+### Classe de Transição de Visualização {/*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.
+A Classe de Transição de Visualização é o(s) nome(s) da classe CSS aplicado(s) pelo React durante a transição quando o ViewTransition é ativado. Pode ser uma string ou um objeto.
+- `string`: a `class` adicionada aos elementos filhos quando ativada. Se `'none'` for fornecido, nenhuma classe será adicionada.
+- `object`: a classe adicionada aos elementos filhos será a chave correspondente ao tipo de Transição de Visualização adicionado com `addTransitionType`. O objeto também pode especificar um `default` a ser usado se nenhum tipo correspondente for encontrado.
-The value `'none'` can be used to prevent a View Transition from activating for a specific trigger.
+O valor `'none'` pode ser usado para impedir que uma Transição de Visualização seja ativada para um gatilho específico.
-### Styling View Transitions {/*styling-view-transitions*/}
+### Estilizando Transições de Visualização {/*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.
+Em muitos exemplos iniciais de Transições de Visualização na web, você verá o uso de [`view-transition-name`](https://developer.mozilla.org/en-US/docs/Web/CSS/view-transition-name) e, em seguida, estilizando-o usando seletores `::view-transition-...(meu-nome)`. Não recomendamos isso para estilização. Em vez disso, normalmente recomendamos o uso de uma Classe de Transição de Visualização.
-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.
+Para personalizar a animação de um ``, você pode fornecer uma Classe de Transição de Visualização a uma das props de ativação. A Classe de Transição de Visualização é um nome de classe CSS que o React aplica aos elementos filhos quando o ViewTransition é ativado.
-For example, to customize an "enter" animation, provide a class name to the `enter` prop:
+Por exemplo, para personalizar uma animação de "enter", forneça um nome de classe à 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:
+Quando o `` ativar uma animação de "enter", o React adicionará o nome de classe `slide-in`. Em seguida, você pode referenciar essa classe usando [pseudo-seletores de transição de visualização](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#pseudo-elements) para criar animações reutilizáveis:
```css
::view-transition-group(.slide-in) {
@@ -139,27 +139,27 @@ 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.
+No futuro, bibliotecas CSS podem adicionar animações integradas usando Classes de Transição de Visualização para facilitar o uso.
-#### Caveats {/*caveats*/}
+#### Ressalvas {/*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](/reference/react/Suspense#revealing-content-together-at-once).
-- `` 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.
+- Por padrão, `setState` atualiza imediatamente e não ativa ``, apenas atualizações envolvidas em uma [Transição](/reference/react/useTransition). Você também pode usar [``](/reference/react/Suspense) para optar por uma Transição para [revelar conteúdo](/reference/react/Suspense#revealing-content-together-at-once).
+- `` cria uma imagem que pode ser movida, dimensionada e com cross-fade. Ao contrário das Animações de Layout que você pode ter visto no React Native ou Motion, isso significa que nem todo elemento individual dentro dele anima sua posição. Isso pode levar a um melhor desempenho e a uma sensação mais contínua e suave de animação em comparação com a animação de cada peça individual. No entanto, isso também pode perder a continuidade em coisas que deveriam estar se movendo por conta própria. Portanto, você pode precisar adicionar mais limites `` manualmente como resultado.
+- Muitos usuários podem preferir não ter animações na página. O React não desabilita automaticamente as animações para este caso. Recomendamos o uso da consulta de mídia `@media (prefers-reduced-motion)` para desativar animações ou atenuá-las com base na preferência do usuário. No futuro, bibliotecas CSS podem ter isso integrado em seus presets.
+- Atualmente, `` funciona apenas no DOM. Estamos trabalhando para adicionar suporte ao React Native e outras plataformas.
---
-## Usage {/*usage*/}
+## Uso {/*usage*/}
-### Animating an element on enter/exit {/*animating-an-element-on-enter*/}
+### Animando um elemento ao entrar/sair {/*animating-an-element-on-enter*/}
-Enter/Exit Transitions trigger when a `` is added or removed by a component in a transition:
+Transições de Entrada/Saída são acionadas quando um `` é adicionado ou removido por um componente em uma transição:
```js
function Child() {
- return Hi
+ return Oi
}
function Parent() {
@@ -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.
+Quando `setShow` é chamado, `show` muda para `true` e o componente `Child` é renderizado. Quando `setShow` é chamado dentro de `startTransition`, e `Child` renderiza um `ViewTransition` antes de qualquer outro nó DOM, uma animação de `enter` é acionada.
-When `show` switches back to `false`, an `exit` animation is triggered.
+Quando `show` muda de volta para `false`, uma animação de `exit` é acionada.
@@ -245,8 +245,8 @@ export default function Component() {
export default [
{
id: '1',
- title: 'First video',
- description: 'Video description',
+ title: 'Primeiro vídeo',
+ description: 'Descrição do vídeo',
image: 'blue',
}
]
@@ -348,13 +348,13 @@ button:hover {
-`` only activates if it is placed before any DOM node. If `Child` instead looked like this, no animation would trigger:
+`` só ativa se for colocado antes de qualquer nó DOM. Se `Child` fosse assim, nenhuma animação seria acionada:
```js [3, 5]
function Component() {
return (
- Hi
+ Oi
);
}
@@ -363,9 +363,9 @@ function Component() {
---
-### Animating a shared element {/*animating-a-shared-element*/}
+### Animando um elemento compartilhado {/*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.
+Normalmente, não recomendamos atribuir um nome a um `` e, em vez disso, deixamos o React atribuir um nome automático. A razão pela qual você pode querer atribuir um nome é para animar entre componentes completamente diferentes quando uma árvore é desmontada e outra árvore é montada ao mesmo tempo. Para preservar a continuidade.
```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.
+Quando uma árvore é desmontada e outra é montada, se houver um par onde o mesmo nome existe na árvore que está sendo desmontada e na árvore que está sendo montada, eles acionam a animação "compartilhada" em ambos. Ela anima do lado que está sendo desmontado para o lado que está sendo montado.
-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.
+Ao contrário de uma animação de saída/entrada, isso pode estar profundamente dentro da árvore deletada/montada. Se um `` também fosse elegível para saída/entrada, a animação "compartilhada" teria precedência.
-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.
+Se a Transição primeiro desmontar um lado e depois levar a um fallback `` sendo mostrado antes que eventualmente o novo nome seja montado, nenhuma transição de elemento compartilhado acontece.
@@ -463,8 +463,8 @@ export function FullscreenVideo({video, onExit}) {
export default [
{
id: '1',
- title: 'First video',
- description: 'Video description',
+ title: 'Primeiro vídeo',
+ description: 'Descrição do vídeo',
image: 'blue',
}
]
@@ -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.
+Se o lado montado ou desmontado de um par estiver fora da viewport, nenhum par é formado. Isso garante que ele não voe para dentro ou para fora da viewport quando algo é rolado. Em vez disso, ele é tratado como uma entrada/saída regular por si só.
-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.
+Isso não acontece se a mesma instância do Componente mudar de posição, o que aciona uma "atualização". Essas animam independentemente se uma posição está fora da 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.
+Atualmente, há uma peculiaridade onde se um `` desmontado profundamente aninhado estiver dentro da viewport, mas o lado montado não estiver dentro da viewport, o lado desmontado anima como sua própria animação de "saída", mesmo que esteja profundamente aninhado, em vez de como parte da animação pai.
-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.
+É importante que haja apenas uma coisa com o mesmo nome montada por vez em todo o aplicativo. Portanto, é importante usar namespaces únicos para o nome para evitar conflitos. Para garantir que você possa fazer isso, você pode querer adicionar uma constante em um módulo separado que você importe.
```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*/}
+### Animando a reordenação de itens em uma lista {/*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.
+Ao reordenar uma lista, sem atualizar o conteúdo, a animação de "atualização" é acionada em cada `` na lista se eles estiverem fora de um nó DOM. Semelhante às animações de entrada/saída.
-This means that this will trigger the animation on this ``:
+Isso significa que isso acionará a animação neste ``:
```js
function Component() {
@@ -831,14 +831,14 @@ button:hover {
-However, this wouldn't animate each individual item:
+No entanto, isso não animaria cada item individualmente:
```js
function Component() {
return
...
;
}
```
-Instead, any parent `` would cross-fade. If there is no parent `` then there's no animation in that case.
+Em vez disso, qualquer `` pai faria um cross-fade. Se não houver um `` pai, então não haverá animação nesse caso.
@@ -1035,35 +1035,35 @@ button:hover {
-This means you might want to avoid wrapper elements in lists where you want to allow the Component to control its own reorder animation:
+Isso significa que você pode querer evitar elementos de wrapper em listas onde deseja permitir que o Componente controle sua própria animação de reordenação:
```
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.
+A regra acima também se aplica se um dos itens for atualizado para redimensionar, o que faz com que os irmãos redimensionem, ele também animará seu `` irmão, mas apenas se eles forem irmãos imediatos.
-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.
+Isso significa que, durante uma atualização, que causa muito relayout, ele não anima individualmente cada `` na página. Isso levaria a muitas animações barulhentas que distraem da mudança real. Portanto, o React é mais conservador sobre quando uma animação individual é acionada.
-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.
+É importante usar chaves corretamente para preservar a identidade ao reordenar listas. Pode parecer que você poderia usar "nome", transições de elementos compartilhados, para animar reordenações, mas isso não seria acionado se um lado estivesse fora da viewport. Para animar uma reordenação, você geralmente quer mostrar que ela foi para uma posição fora da viewport.
---
-### Animating from Suspense content {/*animating-from-suspense-content*/}
+### Animação a partir do conteúdo do 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.
+Assim como qualquer Transição, o React espera pelos dados e por novo CSS (``) antes de executar a animação. Além disso, as ViewTransitions também esperam até 500ms para que novas fontes sejam carregadas antes de iniciar a animação, para evitar que elas apareçam posteriormente com cintilação. Pelo mesmo motivo, uma imagem envolvida em ViewTransition esperará que a imagem seja carregada.
-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.
+Se estiver dentro de uma nova instância de `Suspense`, o fallback é exibido primeiro. Após o `Suspense` carregar completamente, ele aciona a `` para animar a revelação do conteúdo.
-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.
+Atualmente, isso ocorre apenas para Transições do lado do cliente. No futuro, isso também animará os limites do `Suspense` para SSR em streaming quando o conteúdo do servidor suspender durante o carregamento inicial.
-There are two ways to animate Suspense boundaries depending on where you place the ``:
+Existem duas maneiras de animar os limites do `Suspense`, dependendo de onde você coloca a ``:
-Update:
+Atualização:
```
@@ -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.
+Neste cenário, quando o conteúdo muda de A para B, ele será tratado como uma "atualização" e aplicará essa classe, se apropriado. Tanto A quanto B terão o mesmo `view-transition-name` e, portanto, atuarão como um cross-fade por padrão.
@@ -1300,7 +1300,7 @@ button:hover {
-Enter/Exit:
+Entrada/Saída:
```
}>
@@ -1308,16 +1308,36 @@ 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 ``.
+Neste cenário, estas são duas instâncias separadas de `ViewTransition`, cada uma com seu próprio `view-transition-name`. Isso será tratado como uma "saída" de `` e uma "entrada" de ``.
+
+Você pode obter efeitos diferentes dependendo de onde escolher colocar o limite da ``.
+
+---
+### Optando por não participar de uma animação {/*opting-out-of-an-animation*/}
+
+Às vezes, você está envolvendo um componente grande existente, como uma página inteira, e deseja animar algumas atualizações, como a mudança de tema. No entanto, você não quer que todas as atualizações dentro da página inteira participem do cross-fade quando elas estiverem sendo atualizadas. Especialmente se você estiver adicionando mais animações incrementalmente.
+
+Você pode usar a classe "none" para optar por não participar de uma animação. Ao envolver seus filhos em um "none", você pode desabilitar animações para eles enquanto o pai ainda aciona.
+
+```js
+
+