我想要实现一个无限从下到上旋转的轮子。目前我已经得到了以下内容:
![spinning wheel example](https://istack.dev59.com/jZElC.gif)
目前实现的效果:
- 它从下往上旋转
- 当它达到末尾后,会重新从第一个开始旋转
我想要的/有问题的地方:
我希望动画是无限循环的,换言之,不应该有过渡的效果。当动画到达最后一个元素时,它不能跳回到第一个元素,而是平滑地连接到其底部以创建一个持续的从下到上的动画。
如何实现这样的行为?为了实现所需的效果,我使用了js-我需要更多的js或回退到纯CSS动画吗?
class Spinner extends Component {
state = {
active: 0
};
interval;
componentDidMount() {
this.interval = setInterval(() => {
this.setState({active: this.state.active === this.props.content.length - 1 ? 0 : this.state.active + 1});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
setPosition = () => {
const n = 100 / this.props.content.length;
return n * this.state.active * -1;
};
render() {
const style = {
transform: 'translateY(' + this.setPosition() + '%)'
};
return (
<div className="spinner--list d-inline-block align-self-start">
<ul className="p-0 m-0" style={style}>
{
this.props.content.map((item, index) => {
return (
<li key={index}>
<h1>{item}</h1>
</li>
);
})
}
</ul>
</div>
);
}
}
.spinner--list {
max-height: calc((10px + 2vw) * 1.5);
overflow: hidden;
}
.spinner--list ul {
list-style-type: none;
transition: transform 1s;
will-change: transform;
}
.spinner--container h1 {
font-size: calc(10px + 2vw);
line-height: 1.5;
margin: 0;
}
.spinner--container
是什么?它在你的JS代码中不存在。 - Richard