CSS: transition ​

.instui-transition.-transition-fade-entering — Transition घटक के लिए एनीमेशन स्थिति क्लास — .instui-transition और स्थिति क्लास (-transition-fade-entering, -transition-scale-exited, आदि) — किसी भी घटक पर अकेले या चेन किए हुए उपयोग के योग्य।

Source: transition.css

उपयोग ​

css
@import "@pantoken/components/utilities.css";

उदाहरण ​

html
<div class="instui-transition -transition-fade-entering">Animated content</div>

मॉडिफायर ​

मॉडिफायरविवरण
.-transition-*रनटाइम द्वारा टॉगल किया गया ट्रांज़िशन प्रकार/स्थिति क्लास (fade|scale|slide-* + entering|entered|exiting|exited).
.-transition-fade-entered—
.-transition-fade-entering—
.-transition-fade-exited—
.-transition-fade-exiting—
.-transition-scale-entered—
.-transition-scale-entering—
.-transition-scale-exited—
.-transition-scale-exiting—
.-transition-slide-down-entered—
.-transition-slide-down-entering—
.-transition-slide-down-exited—
.-transition-slide-down-exiting—
.-transition-slide-left-entered—
.-transition-slide-left-entering—
.-transition-slide-left-exited—
.-transition-slide-left-exiting—
.-transition-slide-right-entered—
.-transition-slide-right-entering—
.-transition-slide-right-exited—
.-transition-slide-right-exiting—
.-transition-slide-up-entered—
.-transition-slide-up-entering—
.-transition-slide-up-exited—
.-transition-slide-up-exiting—

कस्टम प्रॉपर्टीज ​

प्रॉपर्टीप्रकारडिफ़ॉल्टविवरण
--duration<time>300msएनीमेशन अवधि (डिफ़ॉल्ट 300ms); हर ट्रांज़िशन स्थिति की गति बढ़ाने या घटाने के लिए ओवरराइड करें।
--timing*ease-in-outएनीमेशन टाइमिंग फ़ंक्शन (डिफ़ॉल्ट ease-in-out).