มูลนิธิ - Motion UI

มูลนิธิให้ห้องสมุดเคลื่อนไหว UI สำหรับการสร้างการเปลี่ยน UI และภาพเคลื่อนไหวและถูกใช้โดยส่วนประกอบมูลนิธิเช่นToggler , เปิดเผยและวงโคจร

การติดตั้ง Motion UI

คุณสามารถติดตั้งไลบรารี Motion UI ในโปรเจ็กต์ของคุณได้โดยใช้ npm หรือ bower ดังที่แสดงในโค้ดบรรทัดต่อไปนี้ -

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

คุณสามารถเพิ่มเส้นทางสำหรับไลบรารี Motion UI ในเข็มทิศโดยใช้config.rbดังที่แสดงในโค้ดบรรทัดต่อไปนี้ -

add_import_path 'node_modules/motion-ui/src'

คุณสามารถรวมเส้นทางไว้ในgulp-sassโดยใช้โค้ดบรรทัดต่อไปนี้ -

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

นำเข้าไลบรารี Motion UI ในไฟล์ SASS โดยใช้รหัสต่อไปนี้ -

@import 'motion-ui'

การเปลี่ยนในตัว

Foundation ให้เอฟเฟกต์การเปลี่ยนแปลงโดยใช้คลาสการเปลี่ยนซึ่งสร้างโดยไลบรารี Motion UI ให้เราสร้างตัวอย่างง่ายๆโดยใช้เอฟเฟกต์การเปลี่ยนแปลง

การเปลี่ยนแบบกำหนดเอง

คุณสามารถตั้งค่าคลาสการเปลี่ยนแบบกำหนดเองได้โดยใช้ไลบรารี Motion UI ตัวอย่างเช่นเราจะตั้งค่าคลาสที่กำหนดเองสำหรับการเปลี่ยนmui-hinge ()ซึ่งจะหมุนองค์ประกอบ -

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

ภาพเคลื่อนไหว

คุณสามารถใช้เอฟเฟ็กต์การเปลี่ยน Motion UI สำหรับการสร้างภาพเคลื่อนไหว CSS คลิกลิงก์นี้เพื่อตรวจสอบว่าแอนิเมชั่นทำงานอย่างไรบนโมดอลโดยใช้คลาสdata-animation