Nền tảng - Giao diện người dùng chuyển động

Foundation cung cấp thư viện Motion UI để tạo chuyển tiếp và hoạt ảnh UI và được sử dụng bởi các thành phần Foundation như Toggler , Reveal và Orbit .

Cài đặt giao diện người dùng chuyển động

Bạn có thể cài đặt thư viện Motion UI trong dự án của mình bằng cách sử dụng npm hoặc bower như được hiển thị trong dòng mã sau:

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

Bạn có thể thêm một đường dẫn cho thư viện Motion UI trong La bàn bằng cách sử dụng config.rb như được hiển thị trong dòng mã sau:

add_import_path 'node_modules/motion-ui/src'

Bạn có thể bao gồm đường dẫn trong gulp-sass bằng cách sử dụng các dòng mã sau:

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

Nhập thư viện giao diện người dùng chuyển động trong tệp SASS bằng mã sau:

@import 'motion-ui'

Chuyển tiếp tích hợp

Foundation cung cấp các hiệu ứng chuyển tiếp bằng cách sử dụng các lớp chuyển tiếp được tạo bởi thư viện Motion UI. Hãy để chúng tôi tạo một ví dụ đơn giản bằng cách sử dụng các hiệu ứng chuyển tiếp.

Chuyển đổi tùy chỉnh

Bạn có thể đặt các lớp chuyển tiếp tùy chỉnh bằng thư viện Motion UI. Ví dụ: chúng tôi sẽ đặt các lớp tùy chỉnh cho quá trình chuyển đổi mui-hinge () , sẽ xoay phần tử -

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

Hoạt hình

Bạn có thể sử dụng các hiệu ứng chuyển tiếp Motion UI để tạo hoạt ảnh CSS. Nhấp vào liên kết này để kiểm tra cách hoạt ảnh hoạt động trên phương thức sử dụng lớp hoạt ảnh dữ liệu .