閲覧頂きまして、誠にありがとうございます。
現在、react-canvas-knobというライブラリをつかって、押したら量が増えるつまみのUIを実装しています。
押すたびに量が増えていくという仕様になっているのですが、ただ数値とつまみ部分が変化するだけではさみしいので、アニメーションを追加したいと考えています。
ちょっとずつ増えていくようなアニメーションを追加するためには、cssアニメーションなどを使おうと試みてみたのですが、state内で増減をコントロールしているためアニメーションを入れられず困っています。
ソースコード
JavaScript
1import React from 'react'; 2import Knob from 'react-canvas-knob'; 3 4class MyComponent extends React.Component { 5 state = {value: 0}; 6 7 handleChange = (newValue) => { 8 this.setState({value: newValue}); 9 }; 10 11 _handleAdd = event => { 12 const item = this.state.value; 13 value = vakue + 10; 14 this.setState({ 15 value 16 }); 17 }; 18 19 render() { 20 return ( 21 <div> 22 <Knob 23 value={this.state.value} 24 onChange={this.handleChange} 25 /> 26 <div onClick={this.handleAdd}>+</div> 27 </div> 28 ); 29 } 30} 31 32export default MyComponent
すみませんが、なにか分かる方はご教示いただけませんでしょうか?
あなたの回答
tips
プレビュー