Dva: problema de compilação de módulos css

Criado em 29 nov. 2016  ·  2Comentários  ·  Fonte: dvajs/dva

Ao usar frames-chave, os seguintes problemas foram encontrados nos módulos css:

Código css original:

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

Compilado no seguinte código:

@-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);
}

Acho que o correto deveria ser:

@-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;
}

Não sei se é um bug dos módulos css ou um problema de configuração no webpack.

Observação:

question
Fonte
picture linkeo

Comentários muito úteis

Obrigado 🙏!

Sim, está bem, mas descobri que o problema é

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

Foi minado pela documentação de 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;
picture linkeo em 6 dez. 2016
👍6

Todos 2 comentários

https://github.com/css-modules/css-modules/issues/141#issuecomment -243011699
Isso pode resolver seu problema?

sorrycc picture sorrycc em 5 dez. 2016
👍1

Obrigado 🙏!

Sim, está bem, mas descobri que o problema é

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

Foi minado pela documentação de 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 picture linkeo em 6 dez. 2016
👍6
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

itiwll picture itiwll  ·  4Comentários
bjwulin picture bjwulin  ·  3Comentários
yunfeit picture yunfeit  ·  3Comentários
kpaxqin picture kpaxqin  ·  3Comentários
ljjsimon picture ljjsimon  ·  3Comentários