Fundação - Motion UI

O Foundation fornece a biblioteca Motion UI para a criação de transições e animações da UI e é usado por componentes do Foundation como Toggler , Reveal e Orbit .

Instalando Motion UI

Você pode instalar a biblioteca Motion UI em seu projeto usando npm ou bower conforme mostrado na seguinte linha de código -

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

Você pode adicionar um caminho para a biblioteca Motion UI na bússola usando config.rb conforme mostrado na seguinte linha de código -

add_import_path 'node_modules/motion-ui/src'

Você pode incluir o caminho no gulp-sass usando as seguintes linhas de código -

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

Importe a biblioteca Motion UI no arquivo SASS usando o seguinte código -

@import 'motion-ui'

Transições integradas

O Foundation fornece efeitos de transição usando classes de transição que são criadas pela biblioteca Motion UI. Vamos criar um exemplo simples usando efeitos de transição.

Transições personalizadas

Você pode definir as classes de transição personalizadas usando a biblioteca Motion UI. Por exemplo, vamos definir classes personalizadas para a transição mui-hinge () , que gira o elemento -

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

Animação

Você pode usar efeitos de transição do Motion UI para criar animações CSS. Clique neste link para verificar como a animação funciona no modal usando a classe de animação de dados .