creareapp angularAnimazioni in Angular ed effetto dissolvenza

Vedremo come animare elementi di un'applicazione Angular, partendo dalla definizione dell'animazione e applicandola a del testo.

Ultimo aggiornamento: 10 giorni fa

Anche in Angular, così come accade nelle classiche pagine HTML grazie ai CSS, e possibile creare e riutilizzare semplici animazioni in tutti i nostri componenti. Nulla a che vedere chiaramente con il compianto "Flash" della Adobe, ma passo dopo passo, qualcosa si sta smuovendo.

In questo breve tutorial, impareremo a realizzare semplici animazioni di transizione che poi applicheremo per progettare un'animazione più complessa per un elenco di testi (Lista) basato sulla direttiva *ngFor.

Un'animazione di base è la classica animazione di dissolvenza, quella che vedi quotidianamente nei titoli di apertura e chiusura di molti film. Si tratta di mostrare e poi nascondere qualcosa alla vista, solo che il passaggio tra i due stati avviene in modo progressivo e non a scatto. Spesso si applica a scritte di testo ma anche a immagini o intere pagine o finestre in popup.

Qui sotto puoi vedere un semplice esempio applicato a del testo:

Sappiamo già creare del codice per mostrare o nascondere un pezzo del DOM, sfruttando la classica direttiva *ngIf. Un esempio lo puoi vedere qui sotto, dove ho inserito un componente "Dissolvenza" costituito da un pulsante cliccabile che mostra o nasconde una scritta:

@Component({
  selector: 'dissolvenza',
  template: `
    <button (click)="show = !show">ON/OFF</button>
    <h1 *ngIf="show">Eccomi visibile!</h1>
  `,
})
export class Dissolvenza  {
  show = true;
}

Quando la proprietà show assume valore booleano "true", l'elemento <h1> del DOM è  visualizzato, altrimenti è rimosso completamente. E' chiaro che per rendere il passaggio graduale, dovremo applicare l'animazione prima che la direttiva faccia il suo compito. Vediamo allora i diversi passaggi:

Step 1: Impostare l'app

La prima cosa da fare per gestire le animazioni in Angular è importare il modulo "BrowserAnimationModule" aggiungendolo all'array assoc...

Davide CopelliOhps... scusami la fastidiosa interruzione, ma per questioni gestionali, tutti i tutorial completi gli ho spostati a questo link: WEBSU. Risulterà più semplice anche per te seguirli e chiedermi dei consigli. Ti aspetto, dai... bastano 5 secondi. Non buttare tutto lo sforzo fatto per arrivare qui.

WebStartUniversity

Categoria: Angular

Voto 4.1/5 basato su 268 Recensioni
© 2013-2019 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.