我想做什么
我有一个 sprite 表,我将它用于一些简单的动画。我有一个有两个动画的“播放器”。一个用于攻击,一个用于站立。当前行为如下:“站立”是默认动画。单击播放器时,播放“攻击”动画并切换回“站立”。
针对玩家在攻击时被点击的特殊情况,我想让动画“攻击”动画重置。
我的代码
// React Component
class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
timeout: null
};
}
attack(e) {
if (this.state.timeout) { clearTimeout(this.state.timeout); }
var $el = $(e.target);
$el.css({
backgroundPosition: '0 220px',
animationName: 'attack',
width: '300px'
});
this.state.timeout = setTimeout(function() {
$el.css({
backgroundPosition: 'left top',
animationName: 'stand',
width: '250px'
});
}, 2000);
}
render () {
return (
<div onClick={this.attack.bind(this)} className="player main">{this.props.name}</div>
);
}
}
/* The css */
.player {
width: 250px;
height: 220px;
background: url('assets/player.png') left top;
animation: stand 1.2s steps(3) infinite;
animation-direction: alternate;
}
@keyframes stand {
100% {
background-position: -750px 0;
}
}
@keyframes attack {
100% {
background-position: -900px 220px;
}
}
我想做什么
我知道,因为我设置了“站立”动画的超时时间,所以我必须取消它并在“站立”动画之后制作一个新的 setTimeout。但是,它看起来仍然有点时髦。我尝试使用 forceUpdate() 来查看是否可以重新渲染和重置所有内容,然后启动“攻击”动画,但它似乎没有做任何事情。
我有另一个想法使用 jquery 删除和重新附加 dom 元素,但我觉得它会变得困惑,我相信我可能以错误的方式处理这个问题。你们有什么想法吗?
最佳答案
对于复杂的动画,可以使用https://github.com/chenglou/react-motion可以从https://egghead.io/playlists/react-react-animation-using-react-motion中了解到和 https://egghead.io/lessons/react-react-motion-introduction-to-the-spring-component
对于简单的,我宁愿从元素中添加和删除类来启用动画并重置它。
如果我没理解错的话,你就是在 React 中使用了 jQuery。好吧,要更新 CSS,你不应该在 React 中使用它。
应该有更多理由在 React 中使用 jQuery,因为更新内联 css 在 React 中非常简单。
以下是我尝试这样做的方式:
// React Component
class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
direction: null,
timeout: null
};
}
attack(e) {
//following line can be used to identify multiple targets
//let target = (e.target);
if (this.state.timeout !== null) {
window.clearTimeout(this.state.timeout)
}
let timeout = setTimeout(() => {
this.setState({
direction: null,
timeout: null
});
}, 8000)
let direction = null;
if (e.ctrlKey) {
direction = 'anticlockwise'
} else {
direction = 'clockwise'
}
if (this.state.direction !== direction) {
this.setState({
direction, timeout
});
}
}
render() {
let classNames = ["player", "main"];
let styles = {}
if (this.state.direction !== null) {
if (this.state.direction === 'clockwise')
styles.zoom = 0.8
else
styles.zoom = 1.2
classNames.push(this.state.direction)
}
return ( < div onClick = {
this.attack.bind(this)
}
style={styles}
className = {
classNames.join(' ')
} > {
this.props.name
} < /div>
);
}
}
ReactDOM.render(<Player / > , document.getElementById('game'));
.player {
width: 100px;
height: 100px;
margin: 50px;
zoom: 1;
transition: all linear 0.3s;
display: inline-block;
background-color: #ccc;
animation-timing-function: linear;
}
.clockwise {
animation: clockwise 5s infinite;
}
.anticlockwise {
animation: anticlockwise 5s infinite;
}
@keyframes clockwise {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(180deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes anticlockwise {
0% {
transform: rotate(360deg)
}
50% {
transform: rotate(180deg)
}
100% {
transform: rotate(0deg)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="game"></div>
关于javascript - 你如何取消和重置 react 中的CSS动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39218476/