फाउंडेशन - मोशन यूआई

फाउंडेशन यूआई बदलाव और एनिमेशन बनाने के लिए मोशन यूआई लाइब्रेरी प्रदान करता है और इसका उपयोग फाउंडेशन घटकों जैसे टॉगलर , रिवाइल और ऑर्बिट द्वारा किया जाता है ।

Motion UI स्थापित करना

आप कोड के निम्नलिखित लाइन में दिखाए अनुसार npm या bower का उपयोग करके अपने प्रोजेक्ट में Motion UI लाइब्रेरी स्थापित कर सकते हैं -

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

आप निम्नलिखित की कोड लाइन में दिखाए अनुसार config.rb का उपयोग करके कम्पास में Motion UI लाइब्रेरी के लिए एक रास्ता जोड़ सकते हैं -

add_import_path 'node_modules/motion-ui/src'

आप कोड की निम्नलिखित पंक्तियों का उपयोग करके gulp-sass में पथ को शामिल कर सकते हैं -

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

निम्नलिखित कोड का उपयोग करके SASS फ़ाइल में Motion UI लाइब्रेरी आयात करें -

@import 'motion-ui'

अंतर्निहित संक्रमण

फाउंडेशन संक्रमण वर्गों का उपयोग करके संक्रमण प्रभाव प्रदान करता है जो मोशन यूआई लाइब्रेरी द्वारा बनाए जाते हैं। हम संक्रमण प्रभावों का उपयोग करके एक सरल उदाहरण बनाते हैं ।

कस्टम संक्रमण

आप Motion UI लाइब्रेरी का उपयोग करके कस्टम ट्रांस्फ़ॉर्म क्लासेस सेट कर सकते हैं। उदाहरण के लिए, हम मुई-हिंज () संक्रमण के लिए कस्टम कक्षाएं स्थापित करेंगे , जो तत्व को घुमाता है -

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

एनीमेशन

आप CSS एनिमेशन बनाने के लिए Motion UI संक्रमण प्रभाव का उपयोग कर सकते हैं। डेटा-एनीमेशन वर्ग का उपयोग करके मोडल पर एनीमेशन कैसे काम करता है, यह जांचने के लिए इस लिंक पर क्लिक करें ।