React-Motion

Question

我正在尝试将这两个输入设置为向右移动 400 像素的动画，并且我已经从演示中的 word 中复制了很多这个词，但是我不得不按住按钮我已经绑定了动画到，我不确定为什么。我想知道你们是否可以阐明造成这种情况的原因。我很新手，谢谢。

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;

Answer 1

尝试在注册按钮上使用 onClick 而不是 onMouseDown。

onMouseDown 事件将您的 open 状态切换到之前的状态 false onMouseUp

React-Motion - 强制按住 spring 动画的按钮

React-Motion - Forced to hold button for spring animation

html

reactjs