Dva: Проблема компиляции css-модулей

Созданный на 29 нояб. 2016 · 2Комментарии · Источник: dvajs/dva

При использовании ключевых кадров в 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-modules или проблема конфигурации в webpack.

Примечание:
Проект, созданный с помощью 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]

question

Источник

linkeo

Самый полезный комментарий

Спасибо 🙏!

Да, это нормально, но я обнаружил, что проблема в

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

Был изъят из документации Mozilla😂

<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

Спасибо 🙏!

Да, это нормально, но я обнаружил, что проблема в

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

Был изъят из документации Mozilla😂

<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

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

После выхода системы из системы, как можно одним оператором очистить все данные в хранилище, и сообщается об ошибке, когда вложенный маршрут обновляет страницу.

bjwulin · 3Комментарии

Почему после настройки sass он не вступает в силу?

huyawei · 3Комментарии

[Спросить] Как писать, когда смешаны глобальный и меньше & синтаксис cssmodules?

ufohjl · 3Комментарии

Как настроить среду разработки без доры

itiwll · 4Комментарии

Как использовать redux-immutable в dva

not3 · 3Комментарии