Dva: सीएसएस-मॉड्यूल संकलन समस्या

को निर्मित 29 नव॰ 2016 · 2टिप्पणियाँ · स्रोत: dvajs/dva

कीफ़्रेम का उपयोग करते समय, सीएसएस-मॉड्यूल में निम्नलिखित समस्याएं पाई गईं:

मूल सीएसएस कोड:

<strong i="7">@keyframes</strong> rotating {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotating-item {
  animation: 5s linear 0 infinite rotating;
}

निम्नलिखित कोड में संकलित:

@-webkit-keyframes rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
<strong i="11">@keyframes</strong> rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.rotating-item___3pALh {
  -webkit-animation: 5s linear 0 infinite :local(rotating);
          animation: 5s linear 0 infinite :local(rotating);
}

मुझे लगता है कि सही होना चाहिए:

@-webkit-keyframes rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
<strong i="15">@keyframes</strong> rotating___3vsQl {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.rotating-item___3pALh {
  -webkit-animation: 5s linear 0 infinite rotating___3vsQl;
          animation: 5s linear 0 infinite rotating___3vsQl;
}

मुझे नहीं पता कि यह एक सीएसएस-मॉड्यूल बग है या वेबपैक में कॉन्फ़िगरेशन समस्या है।

ध्यान दें:
डीवा-क्ली के साथ बनाई गई परियोजना ने वेबपैक कॉन्फ़िगरेशन को संशोधित नहीं किया।
मैंने इसे शुरुआत में कम लिखा था, लेकिन अगर मैंने इसे सीएसएस में बदल दिया तो यह काम नहीं किया।
कम लेखन के मामले में, इंगित करें कि <strong i="25">@keyframes</strong> :global(rotating) एक त्रुटि की रिपोर्ट करेगा
उपकरण संस्करण इस प्रकार हैं:
नोड। जेएस@6.9.0
डीवीए@१.१.०
[email protected]
वेबपैक@1.12.15
postcss-मॉड्यूल-निकालें-आयात@1.0.1
postcss-मॉड्यूल-स्थानीय-द्वारा-डिफ़ॉल्ट@1.1.1
पोस्टसीएसएस-मॉड्यूल-स्कोप@1.0.2
postcss-मॉड्यूल-मान@१.२.२

question

स्रोत

linkeo

सबसे उपयोगी टिप्पणी

धन्यवाद 🙏!

हाँ, यह ठीक है, लेकिन मैंने पाया कि समस्या है

animation: name .6s ease; // 这样是可以的
animation: .6s ease name; // 而这样就不会被识别到了

मोज़िला के दस्तावेज़ीकरण द्वारा खड़ा किया गया था😂

<single-animation> = <time> || <single-timing-function> || 
<time> || <single-animation-iteration-count> || <single-
animation-direction> || <single-animation-fill-mode> || 
<single-animation-play-state> || [ none | <keyframes-name> ]


/* <strong i="11">@keyframes</strong> duration | timing-function | delay | 
  iteration-count | direction | fill-mode | play-state | name */
 animation: 3s ease-in 1s 2 reverse both paused slidein;

/* <strong i="12">@keyframes</strong> duration | timing-function | delay | name */
 animation: 3s linear 1s slidein;

/* <strong i="13">@keyframes</strong> duration | name */
 animation: 3s slidein;

linkeo 6 दिस॰ 2016

👍6

सभी 2 टिप्पणियाँ

https://github.com/css-modules/css-modules/issues/141#issuecomment -243011699
क्या यह आपकी समस्या का समाधान कर सकता है?

sorrycc 5 दिस॰ 2016

👍1