我试图找出为什么我在我的css中添加的动画名称样式没有从我的开发环境复制到我的生产环境。
这是我的生产环境中的代码。
@keyframes a { 0% { opacity: 0 } to { opacity: 1 } } .site-main__home-links { animation: a 2s }这是我的开发环境中的代码。
@-webkit-keyframes fadeButtons { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeButtons { from { opacity: 0; } to { opacity: 1; } } .site-main__home-links { -webkit-animation: fadeButtons 2s; animation: fadeButtons 2s; }这里是我的package.json的列表
I'm trying to figure out why my animation-name style I added in my css is not copying over from my development environment to my production environment.
This is the code that is in my production environment.
@keyframes a { 0% { opacity: 0 } to { opacity: 1 } } .site-main__home-links { animation: a 2s }This is the code in my development environment.
@-webkit-keyframes fadeButtons { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeButtons { from { opacity: 0; } to { opacity: 1; } } .site-main__home-links { -webkit-animation: fadeButtons 2s; animation: fadeButtons 2s; }Here's a list of my package.json
最满意答案
因为gulp-cssnano所做的一些工作就是减少可以腾出太空空间的长名字,所以“fadeButtons”变成了“a”。 这是正常的,也是缩小过程的一部分 - 它被称为“改变”名称。 你的代码在缩小之后应该可以正常工作。
您必须查看cssnano文档以查看是否可以关闭mangling名称(或某些指定的名称)。
Because some of what gulp-cssnano does is to reduce long names where it can to space space, so "fadeButtons" got changed to "a". This is normal and part of the minification process - it Is called "mangling" the names. And your code should work just fine after this minification.
You would have to look at the cssnano documentation to see If mangling names (or certain specified names) can be turned off.
更多推荐
发布评论