Foundation - Motion UI

Foundation fornisce la libreria Motion UI per creare transizioni e animazioni dell'interfaccia utente e viene utilizzato dai componenti Foundation come Toggler , Reveal e Orbit .

Installazione di Motion UI

Puoi installare la libreria Motion UI nel tuo progetto usando npm o bower come mostrato nella seguente riga di codice:

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

Puoi aggiungere un percorso per la libreria dell'interfaccia utente di Motion in Compass utilizzando config.rb come mostrato nella seguente riga di codice:

add_import_path 'node_modules/motion-ui/src'

Puoi includere il percorso nel gulp-sass usando le seguenti righe di codice:

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

Importa la libreria Motion UI nel file SASS utilizzando il codice seguente:

@import 'motion-ui'

Transizioni integrate

Foundation fornisce effetti di transizione utilizzando classi di transizione create dalla libreria Motion UI. Creiamo un semplice esempio utilizzando gli effetti di transizione.

Transizioni personalizzate

Puoi impostare le classi di transizione personalizzate utilizzando la libreria Motion UI. Ad esempio, imposteremo classi personalizzate per la transizione mui-hinge () , che ruota l'elemento -

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

Animazione

È possibile utilizzare gli effetti di transizione dell'interfaccia utente di movimento per creare animazioni CSS. Fare clic su questo collegamento per verificare come funziona l' animazione sulla classe modale utilizzando l'animazione dei dati .