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/guide/transitions-list.md
+55-55Lines changed: 55 additions & 55 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,25 +1,25 @@
1
-
# List Transitions
1
+
# Transições de Listas
2
2
3
-
So far, we've managed transitions for:
3
+
Até agora, gerenciamos transições para:
4
4
5
-
-Individual nodes
6
-
-Multiple nodes where only 1 is rendered at a time
5
+
-Nós individuais
6
+
-Multiplos nós onde apenas 1 é renderizado por vez
7
7
8
-
So what about for when we have a whole list of items we want to render simultaneously, for example with `v-for`? In this case, we'll use the`<transition-group>` component. Before we dive into an example though, there are a few things that are important to know about this component:
8
+
E quando tivermos toda uma lista de itens que queremos renderizar simultâneamente, com `v-for` por exemplo? Neste caso, usaremos o componente`<transition-group>`. Antes de entramos em um exemplo, existem algumas coisas que são importantes saber sobre esse componente:
9
9
10
-
-Unlike `<transition>`, it renders an actual element: a`<span>`by default. You can change the element that's rendered with the `tag` attribute.
11
-
-[Transition modes](/guide/transitions-enterleave#transition-modes)are not available, because we are no longer alternating between mutually exclusive elements.
12
-
-Elements inside are**always required**to have a unique `key`attribute.
13
-
-CSS transition classes will be applied to inner elements and not to the group/container itself.
10
+
-Ao contrário do `<transition>`, ele renderiza um elemento real: um`<span>`por padrão. Você pode alterar o elemento que é renderizado com o atributo `tag`.
11
+
-Os [modos de transição](/guide/transitions-enterleave#transition-modes)não estão disponíveis, porque não estamos mais alternando entre elementos mutuamente exclusivos.
12
+
-Os elementos internos**sempre precisam**ter um atributo `key`único.
13
+
-As classes de transições CSS serão aplicadas aos elementos internos e não ao grupo/contêiner em si.
14
14
15
-
### List Entering/Leaving Transitions
15
+
### Transições de Entrada/Saída em Listas
16
16
17
-
Now let's dive into an example, transitioning entering and leaving using the same CSS classes we've used previously:
17
+
Agora iremos exemplificar, fazendo transições de entrada e saída usando as mesmas classes CSS que usamos anteriormente:
18
18
19
19
```html
20
20
<divid="list-demo">
21
-
<button@click="add">Add</button>
22
-
<button@click="remove">Remove</button>
21
+
<button@click="add">Adicionar</button>
22
+
<button@click="remove">Remover</button>
23
23
<transition-groupname="list"tag="p">
24
24
<spanv-for="item in items":key="item"class="list-item">
There's one problem with this example. When you add or remove an item, the ones around it instantly snap into their new place instead of smoothly transitioning. We'll fix that later.
78
+
Existe um problema com esse exemplo. Quando você adiciona ou remove um item, os que estão ao redor se encaixam instantaneamente em seu novo lugar, em vez de realizarem uma transição suave. Corrigiremos isso depois.
79
79
80
-
### List Move Transitions
80
+
### Transições de Movimento em Listas
81
81
82
-
The `<transition-group>`component has another trick up its sleeve. It can not only animate entering and leaving, but also changes in position. The only new concept you need to know to use this feature is the addition of**the`v-move` class**, which is added when items are changing positions. Like the other classes, its prefix will match the value of a provided `name`attribute and you can also manually specify a class with the`move-class` attribute.
82
+
O componente `<transition-group>`tem outro truque na manga. Ele não apenas anima entrada e saída, como também anima mudanças nas posições. O único conceito novo que você precisa saber para usar esse recurso é a adição da**classe`v-move`**, que é adicionada quando os items estão mudando de posição. Assim como as outras classes, esse prefixo irá corresponder ao valor do atributo `name`fornecido e você pode especificar manualmente uma classe com o atributo`move-class`.
83
83
84
-
This class is mostly useful for specifying the transition timing and easing curve, as you'll see below:
84
+
Essa classe é útil principalmente para especificar o tempo de transição e a curva de atenuação, como você pode ver abaixo:
This might seem like magic, but under the hood, Vue is using an animation technique called [FLIP](https://aerotwist.com/blog/flip-your-animations/)to smoothly transition elements from their old position to their new position using transforms.
129
+
Isso pode parecer mágica, mas por baixo dos panos, o Vue está usando uma técnica de animação chamada [FLIP](https://aerotwist.com/blog/flip-your-animations/)para transicionar suavemente os elementos de sua antiga posição para a nova posição usando transformações.
130
130
131
-
We can combine this technique with our previous implementation to animate every possible change to our list!
131
+
Podemos combinar essa técnica com nossa implementação anterior para animar qualquer mudança possível em nossa lista!
One important note is that these FLIP transitions do not work with elements set to `display: inline`. As an alternative, you can use`display: inline-block`or place elements in a flex context.
200
+
::: tip Nota
201
+
É importante notar que essas transições FLIP não funcionam com elementos configurados com `display: inline`. Alternativamente, você pode usar`display: inline-block`ou posicionar os elementos em um contexto _flex_.
202
202
:::
203
203
204
-
These FLIP animations are also not limited to a single axis. Items in a multidimensional grid can be [transitioned too](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions):
204
+
Essas animações FLIP não são limitadas à um único eixo. Itens em um _grid_multidimensional podem ser [transicionados também](https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-list-move-transitions):
205
205
206
-
TODO: example
206
+
TODO: exemplo
207
207
208
-
### Staggering List Transitions
208
+
### Escalonando Transições de Listas
209
209
210
-
By communicating with JavaScript transitions through data attributes, it's also possible to stagger transitions in a list:
210
+
Comunicando-se com transições JavaScript por meio de atributos de dados, também é possível escalonar as transições em uma lista:
Transitions can be reused through Vue's component system. To create a reusable transition, all you have to do is place a `<transition>`or`<transition-group>`component at the root, then pass any children into the transition component.
294
+
Transições podem ser reutilizadas através do sistema de componentes do Vue. Para criar uma transição reutilizável tudo o que você precisa fazer é colocar um componente `<transition>`ou`<transition-group>`na raiz, e então passar qualquer filho para o componente de transição.
295
295
296
-
TODO: refactor to Vue 3
296
+
TODO: refatorar para o Vue 3
297
297
298
-
Here's an example using a template component:
298
+
Veja um exemplo usando um componente com _template_:
Yes, even transitions in Vue are data-driven! The most basic example of a dynamic transition binds the `name`attribute to a dynamic property.
350
+
Sim, até mesmo as transições no Vue são baseadas em dados! O exemplo mais trivial de uma transição dinâmica vincula o atributo `name`à uma propriedade dinâmica.
351
351
352
352
```html
353
353
<transition:name="transitionName">
354
354
<!-- ... -->
355
355
</transition>
356
356
```
357
357
358
-
This can be useful when you've defined CSS transitions/animations using Vue's transition class conventions and want to switch between them.
358
+
Isso pode ser útil quando você definiu transições/animações CSS usando as convenções de classes de transição do Vue e quer alternar entre elas.
359
359
360
-
Really though, any transition attribute can be dynamically bound. And it's not only attributes. Since event hooks are methods, they have access to any data in the context. That means depending on the state of your component, your JavaScript transitions can behave differently.
360
+
Na verdade, qualquer atributo de transição pode ser vinculado dinamicamente. E não somente atributos. Como gatilhos de eventos são métodos, eles possuem acesso à qualquer dado no contexto. Isso significa que, dependendo do estado do seu componente, as transições do JavaScript podem se comportar de maneira diferente.
Finally, the ultimate way of creating dynamic transitions is through components that accept props to change the nature of the transition(s) to be used. It may sound cheesy, but the only limit really is your imagination.
444
+
Finalmente, a melhor maneira de criar transições dinâmicas é por meio de componentes que aceitam propriedades para mudar a natureza das transições à serem usadas. Pode soar clichê, mas o único limite realmente é sua imaginação.
0 commit comments