在reactjs上的按钮之间移动动画

Question

我正在做一个项目，我是动画新手，当用户点击按钮时，我的目标是从一组按钮开始，一行将从一个按钮移动到另一个按钮。我设法使按钮处于活动状态，并更改颜色等，唯一我仍然做不到的是从一个按钮移动到另一个按钮。

这是我的Reactjs代码

class AnimateButtonArea extends Component {
constructor(props){
super(props)
this.state = {  active: 0 };
}

setActive = (key) => {
this.setState({ active: key });
}
render() {
return (
<div className = "AnimateButtonArea">
{data.AnimateButton.map((animateButton, key) => {
return(
<div key = {key} className = { this.state.active === key ? "AnimateButton active" : "AnimateButton"} >
<Button type = {this.state.active === key ? "SofiaProBlackSmallActive" : "SofiaProBlackSmall"} onClick = {() => { this.setActive(key) }}  text = {animateButton.button} />
<div className = "animatedLine" />
</div>
)
})}
</div>
)
}
}
export default AnimateButtonArea;

这是我的Sass代码

.AnimateButtonArea
display: inline-block

.AnimateButton
display: inline-block
margin-right: 147px  
.AnimateButton.active .animatedLine
position: relative
height: 8px
left: 24px
background: var(--yellow)
border-radius: 40px
text-align: center
animation: grow 0.4s ease-out
@keyframes grow
0%
width: 0%
100%
width: 100%

更新

现在我可以移动线，但现在我想增加线，然后减少并移动

这是更新的Reactjs部分

setActive = (key) => {
this.setState({ active: key })

var difference = key - this.state.active
leftActive += 300 * difference
style = { width: `calc(${leftActive}px + 120px)`}
setTimeout(()=> this.beActive(leftActive), 1000)
}
beActive = (leftActive) => {
style = { marginLeft: `calc(${leftActive}px)`, with: `120px`}
console.log(style);
}

Answer 1

要在位置之间移动，行应该是映射数组之外的唯一对象。然后，您可以使用内联样式基于键/(array.length-1(来操纵定位(带边距、变换或左侧(。

设置css转换：所有1s轻松；以设置动画。

Answer 2

我会将宽度传递给state(this.state.activeWidth(，并将其包含在行样式对象中。｛width:this.state.activeWidth｝