CSS转换没有传递随机数
CSS转换没有传递随机数
提问于 2018-06-07 04:24:59
我已经使用math.floor将我的转换设置为一个随机数。我不知道为什么它不能工作。当点击按钮时，div跳转到它的位置，而不是根据设置的随机时间移动。我通过控制台登录持续时间函数，然后在我的控制台上获得随机数。
class TransitionComp extends Component{
state={
show: true
}
toggle =(event)=>{
this.setState({
show: !this.state.show ? true:false
})
};
Duration = ()=>{
return Math.floor(Math.random() * 3000)
}
render(){
console.log(this.Duration())
return(
<div >
<Transition
in={this.state.show}
timeout={this.Duration()}>
{state=>
<div style={{
background: "green",
height: "100px",
width: "50px",
transition: "all ${this.Duration()}s ease-out",
transform: state=== "exiting" || state=== "exited"?
"translate(2500%)":"translate(0%)",
background: state=== "exiting" || state=== "exited"? "blue" :
"red",
}}>
</div>
}
</Transition>
<button className="showDiv" onClick=
{this.toggle}>Toggle</button>
</div>
)
}
}
export default TransitionComp;回答 1
Stack Overflow用户
发布于 2018-06-07 04:29:21
原因是您使用了双引号。transition应为字符串文字。
尝试以下操作：
...
transition: `all ${this.Duration()}s ease-out`,
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50728990
复制相关文章
相似问题