我试图同时转换多个字母,但具有不同的值。因此,我的目的是为每个跨度随机生成数字,以便span
最终将每个跨度转换为不同的距离。
它有点工作,但不知何故只有一个数字被随机生成并分配给每个 span
.
class Header extends Component {
...
returnLetterTransform = () => {
const y = Math.random() * (15 - 6) + 6;
return 'translate3d(0,' + -y + 'vh,0)'
};
render() {
const letter = {
transform: this.state.foldedLogo ? this.returnLetterTransform() : 'translate3d(0,0,0)'
};
return(
<div className="container-fluid header--container">
<div className="row m-0">
<div className="col-12">
<div className="header--logo--container">
<span className="logo--letter" style={letter}>i</span>
<span className="logo--letter" style={letter}>m</span>
<span className="logo--letter" style={letter}>h</span>
<span className="logo--letter" style={letter}>r</span>
<span className="logo--letter" style={letter}>m</span>
<span className="logo--letter" style={letter}>n</span>
<span className="logo--letter" style={letter}>n</span>
</div>
</div>
</div>
</div>
);
}
}
export default Header;
希望这可以帮助任何人。
...
var that = this,
returnLetterTransform = () => {
const y = Math.random() * (15 - 6) + 6;
return 'translate3d(0,' + -y + 'vh,0)'
},
/* change to function
to get object dynamically
*/
letter = () => {
const transform = that.state.foldedLogo ? that.returnLetterTransform() : 'translate3d(0,0,0)';
return { transform: transform };
};
render() {
return(
/* call dynamic letter function */
... style={that.letter()} ...
... style={that.letter()} ...
...
);
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句