我正在使用一个渲染SVG图像但不渲染填充的组件。我上了两节课
.svg {
fill-opacity: 0;
.svg-show {
fill-opacity: 1;
transition: fill-opacity 2s;
}
}我的问题是,在持续时间为200的情况下,如何将类名svg-show应用于以下组件
<ReactVivus
className="svg"
option={{
file: forever,
duration: 200,
animTimingFunction: "oneByOne",
type: "delayed",
onReady: console.log
}}
callback={console.log}
/>
答案 0 :(得分:2)
在组件中有一个状态变量,然后根据该变量选择类名称。在类组件中,如下所示:
line = re.sub(r"""
\! # Match a literal '!'
\[ # Match a literal '['
(?x) # Use free-spacing mode.
< # Match a literal '<'
/? # Optionally match a '/'
\d+ # Match one or more digits
> # Match a literal '>'
""", "", line)
答案 1 :(得分:2)
如果要使用钩子:
import React, {useState, useEffect} from "react";
function Calendar() {
const [svgShow, setSvgShow] = useState(false);
useEffect(() => {
setTimeout(() => {
setSvgShow(true);
}, 200);
}, []);
return (
<ReactVivus
className={svgShow ? "svg-show" : "svg"}
option={{
file: forever,
duration: 200,
animTimingFunction: "oneByOne",
type: "delayed",
onReady: console.log
}}
callback={console.log}
/>
)
}
export default Calendar;