0
私はこれらの2つの入力を400ピクセル右に動かしようとしています。私はこのデモからの単語をかなりコピーしましたが、私はアニメーションを結んでいるボタンを保持し、私はなぜわからない。あなたの人が何を起こしているのかを明らかにできるかどうか、私は疑問に思っていました。私は非常に反応して新しく、ありがとう。React-Motion - スプリングアニメーション用のボタンを押したままにする
import React, { Component } from 'react';
import {Motion, spring} from 'react-motion';
class LoginComponent extends Component {
constructor(props) {
super(props);
this.state = {open: false};
};
handleMouseDown =() => {
this.setState({open: !this.state.open});
};
handleTouchStart = (e) => {
e.preventDefault();
this.handleMouseDown();
};
render() {
return (
<form className="LoginForm">
<Motion style={{x: spring(this.state.open ? 400 : 0)}}>
{({x}) =>
<div>
<input placeholder="Username" style={{
WebkitTransform: `translate3d(${x}px, 0, 0)`,
transform: `translate3d(${x}px, 0, 0)`,
}} />
<input placeholder="Password" style={{
WebkitTransform: `translate3d(${x}px, 0, 0)`,
transform: `translate3d(${x}px, 0, 0)`,
}} />
</div>
}
</Motion>
<button><h2> Log In </h2></button>
<button onMouseDown={this.handleMouseDown.bind(this)} onTouchStart={this.handleTouchStart.bind(this)}> <h2> Sign Up </h2></button>
</form>
);
}
}
export default LoginComponent;