Temel - Hareket Kullanıcı Arayüzü

Foundation, UI geçişleri ve animasyonları oluşturmak için Motion UI kitaplığı sağlar ve Toggler , Reveal ve Orbit gibi Foundation bileşenleri tarafından kullanılır .

Motion UI Kurulumu

Aşağıdaki kod satırında gösterildiği gibi npm veya bower kullanarak projenize Motion UI kitaplığı kurabilirsiniz -

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

Aşağıdaki kod satırında gösterildiği gibi config.rb'yi kullanarak Compass'ta Motion UI kitaplığı için bir yol ekleyebilirsiniz -

add_import_path 'node_modules/motion-ui/src'

Aşağıdaki kod satırlarını kullanarak yolu gulp-sass'a dahil edebilirsiniz -

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

Aşağıdaki kodu kullanarak Motion UI kitaplığını SASS dosyasına içe aktarın -

@import 'motion-ui'

Yerleşik Geçişler

Foundation, Motion UI kitaplığı tarafından oluşturulan geçiş sınıflarını kullanarak geçiş efektleri sağlar. Geçiş efektlerini kullanarak basit bir örnek oluşturalım .

Özel Geçişler

Motion UI kitaplığını kullanarak özel geçiş sınıflarını ayarlayabilirsiniz. Örneğin , öğeyi döndüren mui-hinge () geçişi için özel sınıflar belirleyeceğiz -

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

Animasyon

CSS animasyonları oluşturmak için Motion UI geçiş efektlerini kullanabilirsiniz. Data-animasyon sınıfını kullanarak model üzerinde animasyonun nasıl çalıştığını kontrol etmek için bu bağlantıyı tıklayın .