एनीमेशन कीफ्रेम के लिए सैस मिक्सिन जिसमें एकाधिक चरणों और संपत्ति को बदलना

Question

यहां मानक सीएसएस है जो मैं उत्पादन करने की कोशिश कर रहा हूं लेकिन काम करने के लिए एसएएसएस मिक्सिन का उपयोग करना चाहता हूं।

मानक सीएसएस

@-webkit-keyframes crank-up { 
    100% { -webkit-transform: rotate(360deg);} 
} 
@-moz-keyframes crank-up { 
    100% { -moz-transform: rotate(360deg);} 
} 
@-o-keyframes crank-up { 
    100% { -o-transform: rotate(360deg);} 
} 
keyframes crank-up { 
    100% { transform: rotate(360deg);} 
} 

मैं जो नीचे दिखाया गया है निम्नलिखित पोस्ट SASS keyframes not compiling as wanted में के रूप में ही mixin उपयोग कर रहा हूँ।

Mixin

@mixin keyframes($name) { 
    @-webkit-keyframes #{$name} { 
     @content; 
    } 
    @-moz-keyframes #{$name} { 
     @content; 
    } 
    @-ms-keyframes #{$name} { 
     @content; 
    } 
    @keyframes #{$name} { 
     @content; 
    } 
} 

ऊपर ठीक है, जब तक कि मुख्य-फ़्रेम में से कोई भी एक संपत्ति है कि एक विक्रेता उपसर्ग की आवश्यकता है शामिल हैं। ट्रांसफॉर्म प्रॉपर्टी की तरह सभी विक्रेता प्रीफिक्स्ड कीफ्रेम (इस मामले में) -webkit-prefix के साथ लागू होते हैं। उदाहरण के लिए:

एससीएसएस

@include keyframes(crank-up) { 
    100% { -webkit-transform: rotate(360deg);} 
} 

सीएसएस

@-webkit-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 
@-moz-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 
@-ms-keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes crank-up { 100% { -webkit-transform: rotate(360deg); } } 

सूचना से ऊपर, एक -moz-फ़्रेम के साथ -webkit-।

बदल Mixin

@mixin keyframes($first-name, $last-name, $argument) { 
    @-webkit-keyframes #{$first-name} { 
    -webkit-#{$last-name}: #{$argument}; 
    } 
    @-moz-keyframes #{$first-name} { 
    -moz-#{$last-name}: #{$argument}; 
    } 
    @-o-keyframes #{$first-name} { 
    -o-#{$last-name}: #{$argument}; 
    } 
    @keyframes #{$first-name} { 
    #{$last-name}: #{$argument}; 
    } 
} 

की तरह लग रही एससीएसएस

mixin के लिए एक कॉल के साथ: -moz- होना चाहिए

तो, तो मेरा पहला विचार करने के लिए ऊपर mixin को बदलने के लिए था

@include keyframes(crank-up, transform, rotate(360deg)) { } 

सीएसएस

@-webkit-keyframes crank-up { -webkit-transform: rotate(360deg); } 
@-moz-keyframes crank-up { -moz-transform: rotate(360deg); } 
@-o-keyframes crank-up { -o-transform: rotate(360deg); } 
@keyframes crank-up { transform: rotate(360deg); } 

यह ठीक काम करता है अगर केवल एक कीफ्रेम 'मंच' है (मूल कोड में देखें - पृष्ठ के शीर्ष पर, केवल 100% चिह्न है), क्षमा करें अगर मेरी शब्दावली कुंजीफ्रेम 'चरण' के संदर्भ में थोड़ा सा है ।

समस्या

मैं ऊपर की तरह एक mixin की तरह कुछ के साथ काम करना चाहते हैं।

@-webkit-keyframes crank-up { 
    20%, 
    40% { -webikit-transform: translateY(34px); } 
    80% { opacity: .8; } 
    100% { -webkit-transform: rotate(360deg);} 
} 

मैंने दो कम्पास एनिमेट प्लगइन्स में भी देखा है; compass-animation और नए compass-animate लेकिन वास्तव में यह सुनिश्चित नहीं है कि ये मदद कर सकते हैं। मुझे एक वैरिएबल में जोड़ने और मिश्रण के साथ इसके लिए परीक्षण करने का कुछ तरीका चाहिए, लेकिन यह नहीं पता कि मिश्रित में चर को पार करना संभव है या नहीं।

किसी भी मदद की बहुत सराहना की। धन्यवाद

मैं निम्नलिखित के साथ खेल रहा हूं लेकिन न तो काम करता हूं, सिर्फ सोचा कि मैं उन्हें यह देखने के लिए जोड़ दूंगा कि कोई यह जानता है कि मैं कहां गलत हूं।

प्रायोगिक mixins:

@mixin vendor-prefix($name, $argument, $webkit: "-webkit-", $moz: "-moz-",$o: "-o-", $stale: ""){ 
    #{$webkit}: #{$name}: #{$argument}; 
    #{$moz}: #{$name}: #{$argument}; 
    #{$o}: #{$name}: #{$argument}; 
    #{$stale}: #{$name}: #{$argument}; 
} 

@mixin vendor-prefix($last-name, $argument){ 
    @if $name == webkit { 
    -webkit-#{$name}: #{$argument}; 
    } @else if $name == moz { 
    -moz-#{$name}: #{$argument}; 
    } @else if $name == o { 
    -o-#{$name}: #{$argument}; 
    } @else { 
    #{$name}: #{$argument}; 
    } 
} 

Answer 1

विक्रेता-prefixers से निपटने के लिए मैं सास mixins के बजाय Autoprefixer उपयोग करने के लिए सलाह देते हैं।

ऑटोप्रिफ़िक्सर इंटरफ़ेस सरल है: केवल विक्रेता उपसर्गों को भूलें और नवीनतम डब्ल्यू 3 सी चश्मा के अनुसार सामान्य सीएसएस लिखें। आपको एक विशेष भाषा (जैसे सास) या विशेष मिश्रण की आवश्यकता नहीं है।

क्योंकि ऑटोप्रिफ़िक्सर सीएसएस के लिए एक पोस्टप्रोसेसर है, तो आप इसे प्रोस, स्टाइलस या कम जैसे प्रीप्रोसेसरों के साथ भी उपयोग कर सकते हैं।

तो, आपके मामले में, आप सिर्फ इस लिखने के लिए की जरूरत है:

@keyframes crank-up { 
    20%, 
    40% { -webkit-transform: translateY(34px); } 
    80% { opacity: .8; } 
    100% { -webkit-transform: rotate(360deg);} 
} 

और autoprefixer लिए स्वचालित रूप से बदल देता:

@-webkit-keyframes crank-up { 
    20%, 40% { 
    -webkit-transform: translateY(34px); 
    } 

    80% { 
    opacity: .8; 
    } 

    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 

@keyframes crank-up { 
    20%, 40% { 
    -webkit-transform: translateY(34px); 
    } 

    80% { 
    opacity: .8; 
    } 

    100% { 
    -webkit-transform: rotate(360deg); 
    } 
} 

Autoprefixer व्यापक रूप से समर्थित है, तो आप अपने एससीएसएस संसाधित कर सकते हैं या कम्पास, ग्रंट, सब्लिमे टेक्स्ट, नोड.जेएस, रूबी, रेल पर रूबी, PHP के माध्यम से इस उपकरण के साथ सीएसएस शैलियों ...

Here परियोजना

Answer 2

Bourbon, Compass, और compass-animation (कम्पास 0.12 डब्ल्यू /) प्रत्येक एक keyframes mixin कि विक्रेता उपसर्गों को सही ढंग से scopes प्रदान के बारे में अधिक जानकारी है।

Answer 3

यदि आप पहले से ही कम्पास का उपयोग कर रहे हैं और अतिरिक्त लाइब्रेरी का पूरा उछाल लोड नहीं करना चाहते हैं और बस कुछ मिश्रण लिखना चाहते हैं तो THIS सबसे अच्छा विकल्प है। अगर आप सास 3.3 या उससे अधिक का उपयोग कर रहे, आप:

/* animation mixing 
keyframe animation 
@include animation('animation-name .4s 1')*/ 

@mixin animation($animate...) { 
$max: length($animate); 
$animations: ''; 

@for $i from 1 through $max { 
    $animations: #{$animations + nth($animate, $i)}; 

    @if $i < $max { 
     $animations: #{$animations + ", "}; 
    } 
} 
-webkit-animation: $animations; 
-moz-animation: $animations; 
-o-animation:  $animations; 
animation:   $animations; 
} 

और यहाँ-फ़्रेम विशेष ब्राउज़र विक्रेता उपसर्ग अंदर CSS3 के गुण शामिल करने के लिए मिश्रण है, बजाय @include का अनुवाद, हम पूर्ण सीएसएस (नोट का उपयोग !global ध्वज हटाने के लिए) की जरूरत है:

@include keyframes(animation-name) { 
    0% { 
     #{$browser}transform: translate3d(100%, 0, 0); 
    } 
    100% { 
     #{$browser}transform: translate3d(0%, 0, 0); 
    } 
} 

और यहाँ कैसे आप खास करने के लिए अपने एनीमेशन में शामिल हैं:

@mixin keyframes($animationName) { 
    @-webkit-keyframes #{$animationName} { 
     $browser: '-webkit-' !global; 
     @content; 
    } 
    @-moz-keyframes #{$animationName} { 
     $browser: '-moz-' !global; 
     @content; 
    } 
    @-o-keyframes #{$animationName} { 
     $browser: '-o-' !global; 
     @content; 
    } 
    @keyframes #{$animationName} { 
     $browser: '' !global; 
     @content; 
    } 
} $browser: null; 

आपके संदर्भ के लिए यहाँ एस.ए.एस.एस. उदाहरण है ular कक्षा या ids

.new-class { 
@include animation('animation-name 5s linear'); 
} 

यह सब कुछ है।