शुद्ध सीएसएस

Question

का उपयोग करते हुए वृद्धिशील सीएसएस अवधि -webkit-animation गुणों का उपयोग करते हैं, जब उपयोगकर्ता पहले पृष्ठ को देखते हैं तो फॉर्म तत्वों को उनके स्थान पर घुमाने के लिए उपयोग करते हैं।

मुझे लगता है कि प्राप्त करने के लिए निम्न कोड का उपयोग करें:

.bounce { 
    -webkit-animation-name: bounceup; 
} 


@-webkit-keyframes bounceup { 
    from { 
    opacity:0.5; 
    -webkit-transform: translateY(100px) rotate(180deg); 
    -webkit-box-shadow: 20px 20px 80px #000; 
    } 
    to { 
    opacity:1; 
    -webkit-transform: translateY(0px) rotate(0deg); 
    } 
} 

सर्वर साइड कोड PHP है। मेरे PHP वर्ग में प्रत्येक फॉर्म तत्व में मेरे पास वर्ग 'बाउंस' था और मैं -webkit-animation-duration नामक एक इनलाइन संपत्ति जोड़ता हूं जिसे मैं प्रत्येक के लिए 0.18 के बीच बढ़ाता हूं।

php कोड:

private $animationDuration=0.7; 

private function _getAnimationDuration() { 
    $ret= '-webkit-animation-duration: '.$this->animationDuration.'s'; 
    $this->animationDuration+=0.1; 
    return $ret; 
} 

यहाँ मैं _getAnimationDuration() फ़ंक्शन के परिणाम के साथ प्रत्येक प्रपत्र तत्व में कोई प्रॉपर्टी 'शैली' नाम जोड़ें।

सवाल यह है: क्या मैं शुद्ध CSS3 और HTML5 (जावास्क्रिप्ट के बिना) का उपयोग कर _getAnimationDuration() फ़ंक्शन को किसी भी तरह कार्यान्वित कर सकता हूं?

मैं एक एनीमेशन अवधि सीएसएस शैली जोड़ना चाहता हूं जो प्रत्येक फॉर्म तत्व के बीच अलग है। प्रत्येक एक ही राशि से बढ़ी है।

Answer 1

टिप्पणियों संक्षेप में:

मौजूदा समाधान स्वाभाविक एचटीएमएल 5/CSS3 है; पीएचपी से गतिशील रूप से CSS3 शैलियों को उत्पन्न करने के लिए बैक-एंड सहायता के साथ।

पैरामैट्रिज्ड या गतिशील सीएसएस शैलियों पूरी तरह से एचटीएमएल 5 और CSS3 के साथ संभव नहीं हैं। वांछित परिणाम के करीब आने के लिए कम या सास जावास्क्रिप्ट और लाइब्रेरी संकलन का उपयोग कर सकते हैं।

Answer 2

यदि आप मान सकते हैं कि सभी तत्व डीओएम पेड़ में समान स्तर पर हैं, तो आप इसे सीएसएस में पूरा कर सकते हैं। लेकिन आपको उन तत्वों की अधिकतम संख्या पर निर्णय लेना है जिन्हें आप आगे समर्थन करने के इच्छुक हैं, क्योंकि आपको प्रत्येक संभावित तत्व के लिए सीएसएस लिखने की आवश्यकता है।

उदाहरण के लिए, चार तत्वों का समर्थन करने के लिए, आप कुछ इस तरह करना होगा:

.bounce { animation-delay:0s; } 
.bounce ~ .bounce { animation-delay:0.1s; } 
.bounce ~ .bounce ~ .bounce { animation-delay:0.2s; } 
.bounce ~ .bounce ~ .bounce ~ .bounce { animation-delay:0.3s; } 

पहले 'उछाल' तत्व सिर्फ 0 सेकंड की देरी हो जाता है। एक 'बाउंस' तत्व जो पहले 'बाउंस' तत्व से पहले होता है (यानी यह दूसरी घटना है), 0.1 सेकंड की देरी होगी। और दो अन्य 'बाउंस' तत्वों (यानी यह तीसरा है) से पहले 'बाउंस' तत्व, 0.2 सेकंड की देरी होगी। और इसी तरह।

जाहिर है कि आप जितने अधिक तत्वों का समर्थन करना चाहते हैं, उतना ही ये चयनकर्ता बन जाएंगे। इसलिए यदि आपको अपने फॉर्म पर बड़ी संख्या में इनपुट का समर्थन करने की आवश्यकता है, तो सीएसएस कुछ हद तक कमजोर हो सकता है, लेकिन यह संभव है।

एसएएसएस या कम जैसे प्रीप्रोसेसर सीएसएस की पीढ़ी को आसान बना सकते हैं, लेकिन आउटपुट अभी भी काफी बड़ा होगा।

उदाहरण के लिए, आप निम्न तरीके से एस.ए.एस.एस. में कर सकता है:

@mixin generateDelays($class,$increment,$count) { 
    $selector: ".#{$class}"; 
    $delay: 0s; 
    @while $count > 0 { 
    #{$selector} { animation-delay:$delay; } 
    $selector: "#{$selector} ~ .#{$class}"; 
    $delay: $delay + $increment; 
    $count: $count - 1; 
    } 
} 

@include generateDelays('bounce',0.1s,10);