We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
在使用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.js@6.9.0 dva@1.1.0 atool-build@0.9.2 webpack@1.12.15 postcss-modules-extract-imports@1.0.1 postcss-modules-local-by-default@1.1.1 postcss-modules-scope@1.0.2 postcss-modules-values@1.2.2
注:
@keyframes :global(rotating)
各工具版本如下:
The text was updated successfully, but these errors were encountered:
css-modules/css-modules#141 (comment) 看下这个能解决你的问题吗?
Sorry, something went wrong.
谢谢🙏!
是的,这样写是可以了,然而我发现问题在于
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;
No branches or pull requests
在使用keyframes时发现css-modules出现如下问题:
原始css代码:
编译成了如下代码:
我觉得正确的应该是:
不知道是css-modules的bug还是webpack里的配置问题。
The text was updated successfully, but these errors were encountered: