Dva: problème de compilation des modules css

Créé le 29 nov. 2016 · 2Commentaires · Source: dvajs/dva

Lors de l'utilisation d'images clés, les problèmes suivants ont été détectés dans les modules css:

Code CSS d'origine:

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

Compilé dans le code suivant:

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

Je pense que la bonne devrait être:

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

Je ne sais pas s'il s'agit d'un bogue de modules css ou d'un problème de configuration dans webpack.

Noter:
Le projet créé avec dva-cli n'a pas modifié la configuration du webpack.
Je l’ai écrit en moins au début, mais cela ne fonctionnait pas si je le changeais en css.
Dans le cas de moins d'écriture, indiquez que <strong i="25">@keyframes</strong> :global(rotating) signalera une erreur
Les versions d'outils sont les suivantes:
nœud. [email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

question

Source

linkeo

Commentaire le plus utile

Merci 🙏!

Oui, c'est bien, mais j'ai trouvé que le problème est

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

A été piqué par la documentation 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 le 6 déc. 2016

👍6

Tous les 2 commentaires

https://github.com/css-modules/css-modules/issues/141#issuecomment -243011699
Cela peut-il résoudre votre problème?

sorrycc le 5 déc. 2016

👍1

Merci 🙏!

Oui, c'est bien, mais j'ai trouvé que le problème est

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

A été piqué par la documentation 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 le 6 déc. 2016

👍6

Cette page vous a été utile?

0 / 5 - 0 notes