عند استخدام الإطارات الرئيسية ، تم العثور على المشكلات التالية في وحدات css:
كود css الأصلي:
<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;
}
لا أعرف ما إذا كان خطأ في وحدات css أو مشكلة تكوين في حزمة الويب.
ملحوظة:
- لم يقم المشروع الذي تم إنشاؤه باستخدام dva-cli بتعديل تكوين حزمة الويب.
- لقد كتبته أقل في البداية ، لكنه لم ينجح إذا قمت بتغييره إلى css.
في حالة الكتابة الأقل ، أشر إلى أن
<strong i="25">@keyframes</strong> :global(rotating)
سيبلغ عن خطأإصدارات الأداة هي كما يلي:
العقدة. [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
- [email protected]
https://github.com/css-modules/css-modules/issues/141#issuecomment -243011699
هل يمكن أن يحل هذا مشكلتك؟
شكرا 🙏!
نعم ، هذا جيد ، لكنني وجدت أن المشكلة
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;
التعليق الأكثر فائدة
شكرا 🙏!
نعم ، هذا جيد ، لكنني وجدت أن المشكلة
لقد تأثرت بوثائق الموزيلا😂