Dva: css-modules 编译问题

Created on 29 Nov 2016 · 2Comments · Source: dvajs/dva

在使用keyframes时发现css-modules出现如下问题：

原始css代码：

@keyframes 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);
  }
}
@keyframes 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);
  }
}
@keyframes 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的bug还是webpack里的配置问题。

注：

用dva-cli创建的项目，没修改webpack配置。

刚开始用less写的，后来改成css也不行。

less写的情况下注明 @keyframes :global(rotating) 会报错

各工具版本如下：

node.[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

[email protected]

question

Source

linkeo

Most helpful comment

谢谢🙏！

是的，这样写是可以了，然而我发现问题在于

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> ]


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

/* @keyframes duration | timing-function | delay | name */
 animation: 3s linear 1s slidein;

/* @keyframes duration | name */
 animation: 3s slidein;

linkeo on 6 Dec 2016

👍6

All 2 comments

https://github.com/css-modules/css-modules/issues/141#issuecomment-243011699
看下这个能解决你的问题吗？

sorrycc on 5 Dec 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> ]


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

/* @keyframes duration | timing-function | delay | name */
 animation: 3s linear 1s slidein;

/* @keyframes duration | name */
 animation: 3s slidein;

linkeo on 6 Dec 2016

👍6

Was this page helpful?

0 / 5 - 0 ratings