Question

我正在尝试将.skill-logo上的动画制作为每个版本随机播放。

React需要将内联样式作为对象传递。这是我在这里所做的。关于在何处分配随机性有什么想法吗？

const Skills = () => {
    let skillLogoStyle = {
        animationDelay: Math.random() + 's',
    };
    return (
        <Row className="skills-container">
            <Col xs={12} mdOffset={2} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={html} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={css} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={js} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={react} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={node} alt="HTML5 Logo"/></Col>
        </Row>
    );
}

Answer 1

您可以尝试创建一个函数，该函数将返回随机的animationDelay，然后为渲染中的每个元素调用它。

returnRandom = () => {
    let random = Math.random()*10;
    return {animationDelay: Math.random() + 's'}

，然后以该功能的渲染设置样式

<Col style = {returnRandom()}

然后每个人都会有不同的动画延迟，这就是我假设要的。

React中的内联CSS样式：添加随机变量

1 个答案: