[英]Inline CSS Styles in React: Adding random variable
I'm trying to get the animation on .skill-logo to start playing at random times for each version. 我正在尝试让.skill-logo上的动画在每个版本的随机时间开始播放。
React needs inline styles to be passed as an object. React需要将内联样式作为对象传递。 Which is what I have done here.
这是我在这里所做的。 Any ideas as to where to assign the randomness?
关于在哪里分配随机性的任何想法?
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>
);
}
You could try creating a function that will return a random animationDelay and then call it for each element in render. 您可以尝试创建一个函数,该函数将返回随机的animationDelay,然后为render中的每个元素调用它。
returnRandom = () => {
let random = Math.random()*10;
return {animationDelay: Math.random() + 's'}
and then in render set style to that function 然后以该功能的渲染设置样式
<Col style = {returnRandom()}
Then each would have a different animation delay, which is what I am assuming you want. 然后每个人都会有不同的动画延迟,这就是我假设您想要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.