[英]CSS Modules and CSS keyframe animations
我正在尝试使用 React、关键帧、CSS 模块(和 SASS)做一个简单的动画。 问题是 CSS 模块散列关键帧名称的方式与散列本地类的方式相同。
JS代码
//...
export default () => {
const [active, setActive] = useState(false);
return(
<div className={active ? 'active' : 'inactive'}
onClick={() => setActive(!active)}
>content</div>
)
}
尝试使所有内容都全局化,将此源用作教程(不编译):
//default scope is local
@keyframes :global(animateIn) {
0% { background: black; }
100% { background: orange; }
}
@keyframes :global(animatOut) {
0% { background: orange; }
100% { background: black; }
}
:global {
.active {
background: orange;
animation-name: animateIn;
animation-duration: 1s;
}
.inactive {
background: black;
animation-name: animateOut;
animation-duration: 1s;
}
}
改变这个也不起作用:
:global {
@keyframes animateIn {
0% { background: black; }
100% { background: orange; }
}
@keyframes animateOut {
0% { background: orange; }
100% { background: black; }
}
}
另一种尝试(不起作用):
@keyframes animateIn {
0% { background: black; }
100% { background: orange; }
}
@keyframes animateOut {
0% { background: orange; }
100% { background: black; }
}
:global {
.active {
background: orange;
:local {
animation-name: animateIn;
}
animation-duration: 1s;
}
.inactive {
background: black;
:local {
animation-name: animateOut;
}
animation-duration: 1s;
}
}
如何在 CSS 模块全局范围内使用关键帧? 是否可以在全局范围类中使用局部范围关键帧?
第三次尝试几乎没问题,只需在&
:local
之前添加&
,并确保它们之间有空格。 这样,您可以切换到选择器内的本地范围。
:global {
.selector {
& :local {
animation: yourAnimation 1s ease;
}
}
}
@keyframes yourAnimation {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
哪个编译为
.selector {
animation: [hashOfYourAnimation] 1s ease;
}
原始答案就可以了。 这在没有SASS的情况下有效:
:global {
.selector {
// global selector stuff ...
}
.selector :local {
animation: yourAnimation 1s ease;
}
}
@keyframes yourAnimation {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
在我的情况下,上述解决方案没有任何效果,但我发现css-loader
解析所有 camelCased 单词并解析它们,所以我将我的@keyframes
动画名称更改为 snake_case 并且有效!...
您可以像这样在组件中添加动画名称
<div
style={{
animationName: styles.animationName
}}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.