Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: 140-animationmd #146

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

docs: 140-animationmd #146

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions src/guide/extras/animation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import Colors from './demos/Colors.vue'
import AnimateWatcher from './demos/AnimateWatcher.vue'
</script>

# Animation Techniques {#animation-techniques}
# Tecniche di animazione {#animation-techniques}

Vue provides the [`<Transition>`](/guide/built-ins/transition) and [`<TransitionGroup>`](/guide/built-ins/transition-group) components for handling enter / leave and list transitions. However, there are many other ways of using animations on the web, even in a Vue application. Here we will discuss a few additional techniques.
Vue mette a disposizione i componenti [`<Transition>`](/guide/built-ins/transition) e [`<TransitionGroup>`](/guide/built-ins/transition-group) per gestire le transizioni di ingresso/uscita e di elenchi di elementi. Tuttavia, esistono molti altri modi per utilizzare le animazioni sul Web, anche in un'applicazione Vue. Qui discuteremo alcune tecniche aggiuntive.

## Class-based Animations {#class-based-animations}
## Animazioni basate su Classi {#class-based-animations}

For elements that are not entering / leaving the DOM, we can trigger animations by dynamically adding a CSS class:
Per gli elementi che non devono entrare o uscire dal DOM, possiamo attivare animazioni aggiungendo dinamicamente una classe CSS:

<div class="composition-api">

Expand Down Expand Up @@ -51,8 +51,8 @@ export default {

```vue-html
<div :class="{ shake: disabled }">
<button @click="warnDisabled">Click me</button>
<span v-if="disabled">This feature is disabled!</span>
<button @click="warnDisabled">Cliccami</button>
<span v-if="disabled">Questa funzionalità è disabilitata!</span>
</div>
```

Expand Down Expand Up @@ -88,9 +88,10 @@ export default {

<DisabledButton />

## State-driven Animations {#state-driven-animations}
## Animazioni guidate dallo stato {#state-driven-animations}

Some transition effects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance:

Alcuni effetti di transizione possono essere applicati tramite una computazione di valori, ad esempio legando uno stile a un elemento mentre avviene un'interazione. Di seguito un esempio:

<div class="composition-api">

Expand Down Expand Up @@ -128,7 +129,7 @@ export default {
:style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
class="movearea"
>
<p>Move your mouse across this div...</p>
<p>Muovi il mouse su questo div...</p>
<p>x: {{ x }}</p>
</div>
```
Expand All @@ -141,13 +142,13 @@ export default {

<Colors />

In addition to color, you can also use style bindings to animate transform, width, or height. You can even animate SVG paths using spring physics - after all, they are all attribute data bindings:
Oltre al colore, puoi anche utilizzare le associazioni di stile per animare la trasformazione, la larghezza o l'altezza di un elemento. Puoi anche animare percorsi SVG utilizzando la conformazione vettoriale (spring physics): dopo tutto, sono tutte associazioni di dati di attributi:

<ElasticHeader />

## Animating with Watchers {#animating-with-watchers}
## Animazione con gli osservatori {#animating-with-watchers}

With some creativity, we can use watchers to animate anything based on some numerical state. For example, we can animate the number itself:
Con un po' di creatività, possiamo usare gli osservatori (watchers) per animare qualsiasi cosa in base ad uno stato numerico. Ad esempio, possiamo animare il numero stesso come nell'esempio seguente:

<div class="composition-api">

Expand Down Expand Up @@ -192,7 +193,7 @@ export default {
```

```vue-html
Type a number: <input v-model.number="number" />
Scrivi un numero: <input v-model.number="number" />
<p>{{ tweened.toFixed(0) }}</p>
```

Expand Down