Fundación - Motion UI

Foundation proporciona la biblioteca Motion UI para crear transiciones y animaciones de UI y es utilizada por componentes de Foundation como Toggler , Reveal y Orbit .

Instalación de Motion UI

Puede instalar la biblioteca Motion UI en su proyecto usando npm o bower como se muestra en la siguiente línea de código:

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

Puede agregar una ruta para la biblioteca Motion UI en Compass usando config.rb como se muestra en la siguiente línea de código:

add_import_path 'node_modules/motion-ui/src'

Puede incluir la ruta en el gulp-sass usando las siguientes líneas de código:

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

Importe la biblioteca Motion UI en el archivo SASS usando el siguiente código:

@import 'motion-ui'

Transiciones integradas

Foundation proporciona efectos de transición mediante el uso de clases de transición creadas por la biblioteca Motion UI. Creemos un ejemplo simple usando efectos de transición.

Transiciones personalizadas

Puede configurar las clases de transición personalizadas utilizando la biblioteca Motion UI. Por ejemplo, estableceremos clases personalizadas para la transición mui-hinge () , que rota el elemento -

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

Animación

Puede utilizar los efectos de transición de Motion UI para crear animaciones CSS. Haga clic en este enlace para comprobar cómo funciona la animación en el modal utilizando la clase de animación de datos .