Fondation - Motion UI

Foundation fournit une bibliothèque d'interface utilisateur Motion pour créer des transitions et des animations d'interface utilisateur et est utilisée par les composants Foundation tels que Toggler , Reveal et Orbit .

Installation de Motion UI

Vous pouvez installer la bibliothèque Motion UI dans votre projet en utilisant npm ou bower, comme indiqué dans la ligne de code suivante -

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

Vous pouvez ajouter un chemin pour la bibliothèque Motion UI dans la boussole à l'aide de config.rb comme indiqué dans la ligne de code suivante -

add_import_path 'node_modules/motion-ui/src'

Vous pouvez inclure le chemin dans le gulp-sass en utilisant les lignes de code suivantes -

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

Importez la bibliothèque Motion UI dans le fichier SASS en utilisant le code suivant -

@import 'motion-ui'

Transitions intégrées

Foundation fournit des effets de transition à l'aide de classes de transition créées par la bibliothèque Motion UI. Créons un exemple simple en utilisant des effets de transition.

Transitions personnalisées

Vous pouvez définir les classes de transition personnalisées à l'aide de la bibliothèque Motion UI. Par exemple, nous allons définir des classes personnalisées pour la transition mui-hinge () , qui fait pivoter l'élément -

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

Animation

Vous pouvez utiliser les effets de transition Motion UI pour créer des animations CSS. Cliquez sur ce lien pour vérifier le fonctionnement de l'animation sur le modal à l'aide de la classe d' animation de données .