|
36 | 36 | - `name` - `string` Usado para gerar automaticamente nomes de classes CSS de transições. Por exemplo, `name: 'fade'` expandirá automaticamente para `.fade-enter`, `.fade-enter-active`, etc.
|
37 | 37 | - `appear` - `boolean`, Se a transição deve ser aplicada na renderização inicial deverá ser configurado para `true`. Por padrão, `false`.
|
38 | 38 | - `persisted` - `boolean`. Se estiver `true`, indica que esta transição não insere/remove realmente o elemento, mas alterna o status entre mostrar/esconder. Os gatilhos de transição são injetados, mas serão ignorados pelo renderizador. Em vez disso, uma diretiva personalizada pode controlar a transição chamando os gatilhos injetados (por exemplo `v-show`).
|
39 |
| - - `css` - `boolean`. Aplicar ou não classes de transição CSS. Por padrão é `true`. Se configurado para `false`, apenas acionará gatilhos registados de JavaScript por meio de eventos de componentes. |
40 |
| - - `type` - `string`. Especifica o tipo de eventos de transição a aguardar o tempo de término da transição. Os valores disponíveis são `"transition"` and `"animation"`. Por padrão, será detectado automaticamente o tipo que tenha uma duração mais longa. |
| 39 | + - `css` - `boolean`. Aplicar ou não classes de transição CSS. Por padrão é `true`. Se configurado para `false`, apenas acionará gatilhos registrados no JavaScript por meio de eventos de componentes. |
| 40 | + - `type` - `string`. Especifica o tipo de eventos de transição a serem aguardados para determinar o tempo de término da transição. Os valores disponíveis são `"transition"` and `"animation"`. Por padrão, será detectado automaticamente o tipo que tenha uma duração mais longa. |
41 | 41 | - `mode` - `string`. Controla a sequência de temporização das transições de saída/entrada. Modos disponíveis são `"out-in"` e `"in-out"`; o padrão é simultâneo.
|
42 | 42 | - `duration` - `number | {`enter`: number,`leave`: number }`. Especifica a duração da transição. Por padrão, o Vue aguarda o primeiro evento de `transitionend` ou `animationend` no elemento de transição raiz.
|
43 | 43 | - `enter-from-class` - `string`
|
|
61 | 61 | - `after-leave`
|
62 | 62 | - `after-appear`
|
63 | 63 | - `enter-cancelled`
|
64 |
| - - `leave-cancelled` (`v-show` apenas) |
| 64 | + - `leave-cancelled` (apenas `v-show`) |
65 | 65 | - `appear-cancelled`
|
66 | 66 |
|
67 | 67 | - **Uso:**
|
68 | 68 |
|
69 |
| - `<transition>` servem como efeitos de transição para elemento/componente **único**. O `<transition>` aplica apenas o comportamento de transição para o conteúdo dentro do *wrapper*; Ele não processa um elemento DOM extra ou aparece na hierarquia dos componentes inspecionados. |
| 69 | + `<transition>` servem como efeitos de transição para elemento/componente **único**. O `<transition>` aplica apenas o comportamento de transição para o conteúdo dentro do *wrapper*; Ele não renderiza um elemento DOM extra ou aparece na hierarquia dos componentes inspecionados. |
70 | 70 |
|
71 | 71 | ```html
|
72 | 72 | <!-- elemento simples -->
|
|
101 | 101 | app.mount('#transition-demo')
|
102 | 102 | ```
|
103 | 103 |
|
104 |
| -- **Ver também:** [Transições de entrada e saída](/guide/transitions-enterleave.html#transitioning-single-elements-components) |
| 104 | +- **Ver também:** [Transições de entrada e saída](/guide/transitions-enterleave.html#transicao-de-elementos-componentes-unicos) |
105 | 105 |
|
106 | 106 | ## transition-group
|
107 | 107 |
|
108 | 108 | - **Propriedades:**
|
109 | 109 |
|
110 |
| - - `tag` - `string`, padrão para `span`. |
111 |
| - - `move-class` - substituí a classe CSS aplicada durante a transição em movimento. |
| 110 | + - `tag` - `string`, `span` como padrão. |
| 111 | + - `move-class` - substitui a classe CSS aplicada durante a transição em movimento. |
112 | 112 | - expõe as mesmas propriedades que `<transition>` exceto `mode`.
|
113 | 113 |
|
114 | 114 | - **Eventos:**
|
|
121 | 121 |
|
122 | 122 | Note que cada filho em um `<transition-group>` deve ser identificado com [**chave única**](./special-attributes.html#key) para as animações funcionarem corretamente.
|
123 | 123 |
|
124 |
| - `<transition-group>` suporta transições de movimento via transformações CSS. Quando a posição de um elemento filho na tela muda após uma actualização, ele aplicará uma classe de movimento CSS (gerada automaticamente a partir do atributo `name` ou configurada com o atributo `move-class` ). Se a propriedade CSS `transform` for passível de transição quando a classe de movimento é aplicada, o elemento será animado suavemente para o seu destino usando a [técnica FLIP](https://aerotwist.com/blog/flip-your-animations/). |
| 124 | + `<transition-group>` suporta transições de movimento via transformações CSS. Quando a posição de um elemento filho na tela muda após uma atualização, ele aplicará uma classe de movimento CSS (gerada automaticamente a partir do atributo `name` ou configurada com o atributo `move-class` ). Se a propriedade CSS `transform` for passível de transição quando a classe de movimento é aplicada, o elemento será animado suavemente para o seu destino usando a [técnica FLIP](https://aerotwist.com/blog/flip-your-animations/). |
125 | 125 |
|
126 | 126 | ```html
|
127 | 127 | <transition-group tag="ul" name="slide">
|
|
137 | 137 |
|
138 | 138 | - **Propriedades:**
|
139 | 139 |
|
140 |
| - - `include` - `string | RegExp | Array`. Apenas os componentes correspondentes serão colocados em cache. |
141 |
| - - `exclude` - `string | RegExp | Array`. Qualquer componente com o mesmo nome não será colocado em cache. |
| 140 | + - `include` - `string | RegExp | Array`. Apenas os componentes com nomes correspondentes serão colocados em cache. |
| 141 | + - `exclude` - `string | RegExp | Array`. Qualquer componente com o nome correspondente não será colocado em cache. |
142 | 142 | - `max` - `number | string`. O número máximo de instâncias do componente a serem colocadas em cache.
|
143 | 143 |
|
144 | 144 | - **Uso:**
|
145 | 145 |
|
146 |
| - Quando *wrapped* (enrolado) em torno de um componente dinâmico, `<keep-alive>` coloca as instâncias dos componentes inativos em cache sem os destruir. Semelhante a `<transition>`, `<keep-alive>` é um componente abstrato: ele não processa um elemento DOM em si, e não aparece na cadeia principal do componente. |
| 146 | + Quando *wrapped* (envolvido) em torno de um componente dinâmico, `<keep-alive>` coloca as instâncias dos componentes inativos em cache sem os destruir. Semelhante a `<transition>`, `<keep-alive>` é um componente abstrato: ele não renderiza um elemento DOM em si, e não aparece na cadeia pai do componente. |
147 | 147 |
|
148 |
| - Quando um componente é alternado para dentro de `<keep-alive>`, em `activated` e `deactivated` os gatilhos de ciclo de vida serão invocados de acordo. |
| 148 | + Quando um componente é alternado dentro de `<keep-alive>`, seus gatilhos de ciclo de vida `activated` e` deactivated` serão invocados de acordo. |
149 | 149 |
|
150 | 150 | Usado principalmente para preservar o estado do componente ou evitar re-renderização.
|
151 | 151 |
|
|
169 | 169 | </transition>
|
170 | 170 | ```
|
171 | 171 |
|
172 |
| - Nota, `<keep-alive>` é projetado para o caso em que ele possui um componente filho direto que está sendo alternado. Isso não funciona se você tiver `v-for` dentro dele. Quando há múltiplos filhos condicionais, como acima, `<keep-alive>` exige que apenas um filho seja renderizado de cada vez. |
| 172 | + Note que, `<keep-alive>` é projetado para o caso em que ele possui um componente filho direto que está sendo alternado. Isso não funciona se você tiver `v-for` dentro dele. Quando há múltiplos filhos condicionais, como acima, `<keep-alive>` exige que apenas um filho seja renderizado de cada vez. |
173 | 173 |
|
174 |
| -- **`include` and `exclude`** |
| 174 | +- **`include` e `exclude`** |
175 | 175 |
|
176 | 176 | As propriedades `include` e `exclude` permitem que os componentes sejam cacheados condicionalmente. Ambas as propriedades podem ser uma String separada por vígulas, uma RegExp ou um Array:
|
177 | 177 |
|
|
192 | 192 | </keep-alive>
|
193 | 193 | ```
|
194 | 194 |
|
195 |
| - A correspondência é verificada primeiro na opção `name` do componente, depois pelo nome no registro local (a chave dentro das opções do `components` pai) se a opção `name` não estiver disponível. Os componentes anônimos não poder ser comparados. |
| 195 | + A correspondência é verificada primeiro na opção `name` do componente, depois pelo nome no registro local (a chave dentro da opção `components` do pai) se a opção `name` não estiver disponível. Os componentes anônimos não poder ser comparados. |
196 | 196 |
|
197 | 197 | - **`max`**
|
198 | 198 |
|
|
204 | 204 | </keep-alive>
|
205 | 205 | ```
|
206 | 206 |
|
207 |
| - ::: warning |
| 207 | + ::: warning Aviso |
208 | 208 | `<keep-alive>` não funciona com componentes funcionais porque eles não têm instâncias a serem guardadas em cache.
|
209 | 209 | :::
|
210 | 210 |
|
211 |
| -- **Ver também:** [Componentes dinâmicos - keep-alive](../guide/component-dynamic-async.html#dynamic-components-with-keep-alive) |
| 211 | +- **Ver também:** [Componentes dinâmicos - keep-alive](../guide/component-dynamic-async.html#componentes-dinamicos-com-keep-alive) |
212 | 212 |
|
213 | 213 | ## slot
|
214 | 214 |
|
|
218 | 218 |
|
219 | 219 | - **Uso:**
|
220 | 220 |
|
221 |
| - `<slot>` servem como pontos de distribuição de conteúdo em modelos de componentes. O próprio `<slot>` será substituído. |
| 221 | + `<slot>` servem como pontos de distribuição de conteúdo em _templates_ de componentes. O `<slot>` em si será substituído. |
222 | 222 |
|
223 |
| - For detailed usage, see the guide section no link em baixo. |
| 223 | + Para obter detalhes sobre o uso, consulte a seção do guia no link abaixo. |
224 | 224 |
|
225 |
| -- **Ver também:** [Distribuição de Conteúdo com Slots](../guide/component-basics.html#content-distribution-with-slots) |
| 225 | +- **Ver também:** [Distribuição de Conteúdo com Slots](../guide/component-basics.html#distribuicao-de-conteudo-com-slots) |
226 | 226 |
|
227 | 227 | ## teleport
|
228 | 228 |
|
229 | 229 | - **Propriedades:**
|
230 | 230 |
|
231 |
| - - `to` - `string`. Propriedade obrigatória, tem que ser um seletor de consulta válido, ou um elemento de HTML (se usado em um ambiente de *browser*). Especifica um elemento de destino para onde o conteúdo de `<teleport>` será movido. |
| 231 | + - `to` - `string`. Propriedade obrigatória, tem que ser um seletor (*query*) válido, ou um elemento HTML (*HTMLElement*) (se usado no ambiente do navegador). Especifica um elemento de destino para onde o conteúdo de `<teleport>` será movido. |
232 | 232 |
|
233 | 233 | ```html
|
234 | 234 | <!-- ok -->
|
235 | 235 | <teleport to="#some-id" />
|
236 | 236 | <teleport to=".some-class" />
|
237 | 237 | <teleport to="[data-teleport]" />
|
238 | 238 |
|
239 |
| - <!-- Wrong --> |
| 239 | + <!-- Errado --> |
240 | 240 | <teleport to="h1" />
|
241 | 241 | <teleport to="some-string" />
|
242 | 242 | ```
|
243 | 243 |
|
244 |
| - - `disabled` - `boolean`. Esta propriedade opcional pode ser usada para desativar a funcionalidade de `<teleport>`, o que significa que o conteúdo do slot não será movido para qualquer lugar, e em vez disso será renderizado onde você especificou o `<teleport>` no componente pai envolvente. |
| 244 | + - `disabled` - `boolean`. Esta propriedade opcional pode ser usada para desativar a funcionalidade de `<teleport>`, o que significa que o conteúdo do slot não será movido para qualquer lugar, e em vez disso será renderizado onde você especificou o `<teleport>` no componente pai que o envolve. |
245 | 245 |
|
246 | 246 | ```html
|
247 | 247 | <teleport to="#popup" :disabled="displayVideoInline">
|
|
251 | 251 |
|
252 | 252 | Observe que isso moverá os nós DOM reais em vez de serem destruídos e recriados e também manterá todas as instâncias do componente vivas. Todos os elementos HTML com estado (por exemplo, um vídeo em reprodução) manterão seu estado.
|
253 | 253 |
|
254 |
| -- **Ver também:** [Componente de teletransporte](../guide/teleport.html#teleport) |
| 254 | +- **Ver também:** [Componente de teletransporte](../guide/teleport.html#teleporte) |
0 commit comments