我正在为anime.js动画库使用React包装器,我正在尝试创建一个接受用户输入的应用程序,然后根据输入设置div的动画
(可视化图片)
它以一个基本的移动方块开始,但在点击Animate按钮后,它会更新为用户输入的内容。
然而,当我点击动画按钮时,div就完全消失了,如果我第二次击中它,整个组件的父母都消失了!但它在控制台中留下了这条错误消息。
我已经完成了测试,并且道具正在传递给AnimationOutput.jsx中的outputDivProps对象并且它们是正确的但是div不会正确更新。
-Holds AnimationForm.jsx& AnimationOutput.jsx组件
import React, {Component} from 'react';
import {Segment} from 'semantic-ui-react';
import AnimationForm from './AnimationForm.jsx';
import AnimationOutput from './AnimationOutput.jsx';
import BoxChanger from './BoxChanger.jsx';
export default class Animation extends Component {
constructor(props) {
super(props);
this.state = {
boxColor: 'white',
boxShape: 'square',
boxDiration: 3,
boxTranslate: '50vw',
boxEasing: 'linear',
boxDelay: 0
};
}
updateAni = (boxColor, boxShape, boxDiration, boxTranslate, boxEasing, boxDelay) => {
console.log('updateAni: ' + boxColor, boxShape, boxDiration, boxTranslate, boxEasing, boxDelay);
this.setState({
boxColor: boxColor,
boxShape: boxShape,
boxDiration: boxDiration,
boxTranslate: boxTranslate,
boxEasing: boxEasing,
boxDelay: boxDelay
});
}
render() {
const {boxColor, boxShape, boxDiration, boxTranslate, boxEasing, boxDelay} = this.state;
return (<Segment inverted>
<h2>Animation Creator!</h2>
<AnimationForm aniUpdate={this.updateAni}/>
<h3>Box Animations!</h3>
<AnimationOutput boxColor={boxColor} boxShape={boxShape} boxDiration={boxDiration * 1000} boxTranslate={boxTranslate} boxEasing={boxEasing} boxDelay={boxDelay * 1000}/>
<BoxChanger/>
</Segment>
);
}
}
import React, {Component} from 'react';
import {Form, Input, Button, Select, Radio} from 'semantic-ui-react';
export default class AnimationForm extends Component {
state = {
boxColorValue: '',
boxShapeValue: '',
boxDirationValue: '',
boxTranslateValue: '',
boxEasingValue: '',
boxDelayValue: ''
};
handleChange = (e, {name, value}) => this.setState({[name]: value});
handleSubmit = () => {
const {boxColorValue, boxShapeValue, boxDirationValue, boxTranslateValue, boxEasingValue, boxDelayValue} = this.state;
this.props.aniUpdate(boxColorValue, boxShapeValue, boxDirationValue, boxTranslateValue, boxEasingValue, boxDelayValue);
}
render() {
const {boxColorValue, boxDirationValue, boxTranslateValue, boxDelayValue} = this.state;
const options = [/* Options for dropdown */]
return (<Form inverted className='box-animation-form' size={'big'}>
<Form.Group widths='equal'>
<Form.Field control={Input} name='boxColorValue' value={boxColorValue} label='Color' placeholder='exp. #ffffff or white' onChange={this.handleChange}/>
<Form.Field control={Input} name='boxDirationValue' value={boxDirationValue} label='Diration' placeholder='exp. 2 or 5 (seconds)' onChange={this.handleChange}/>
<Form.Field control={Select} name='boxEasingValue' label='Transition Type' value={options.value} options={options} placeholder='Types' onChange={this.handleChange}/>
</Form.Group>
<Form.Group inline>
<label>Shape</label>
<Form.Field control={Radio} label='Square' checked={this.state.boxShapeValue === 'square'} onClick={() => this.setState({boxShapeValue: 'square'})}/>
<Form.Field control={Radio} label='Circle' checked={this.state.boxShapeValue === 'circle'} onClick={() => this.setState({boxShapeValue: 'circle'})}/>
<Form.Field control={Radio} label='Triangle' checked={this.state.boxShapeValue === 'triangle'} onClick={() => this.setState({boxShapeValue: 'triangle'})}/>
</Form.Group>
<Form.Group widths='equal'>
<Form.Field control={Input} name='boxTranslateValue' value={boxTranslateValue} label='Want it to move?' placeholder='exp. 200 or 200px' onChange={this.handleChange}/>
<Form.Field control={Input} name='boxDelayValue' value={boxDelayValue} label='Delay' placeholder='exp. 1 or 2 (seconds)' onChange={this.handleChange}/>
</Form.Group>
<Button inverted color='green' onClick={this.handleSubmit}>Animate!</Button>
</Form>);
}
}
- 我认为问题就在这里!
import React from 'react';
import Anime from 'react-anime';
const AnimationOutput = (props) => {
console.log('AnimationOutput: ' + props.boxColor, props.boxShape, props.boxDiration, props.boxTranslate, props.boxEasing, props.boxDelay);
let outputDivProps = {
easing: 'linear',
loop: true,
direction: 'alternate',
duration: props.boxDiration,
translateX: props.boxTranslate
};
let outputDivStyle = {
width: 100,
height: 100,
backgroundColor: props.boxColor
};
console.log(outputDivProps)
return (<div className='animation-output-box'>
<Anime {...outputDivProps}>
<div style={outputDivStyle}></div>
</Anime>
</div>);
}
export default AnimationOutput;