Question

我将这个模块用于我的twitch API应用程序：https://github.com/joshwcomeau/react-flip-move/

目前有一个假动画问题。输入动画效果很好，很好，但不幸的是，当我点击＆＃39; x＆＃39;在其中一个通道上，元素（在我的情况下为a）向上和向右移动。如何让它在当前位置淡出？

import React, { Component } from 'react';
import { connect } from 'react-redux';
import FlipMove from 'react-flip-move';
import { selectUser, fetchUser, removeUser } from '../actions/index';

class UsersList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: 'all',
    };
    this.fetchInitialUsers(this.props.initialUsers);
  }

  fetchInitialUsers(users) {
    users.map(this.props.fetchUser);
  }

  renderUser(user) {
    const { channelData, streamData } = user;
    return (
      <tr
        key={channelData.display_name}
        onClick={() => this.props.selectUser(user)}
        className='list-item'>
        <td>
          <img src={channelData.logo} className='user-logo' />
        </td>
        <td>
          {channelData.display_name}
        </td>
        <td>
          {streamData.stream ?
            <span className='online'>Online</span> :
            <span className='offline'>Offline</span>}

        </td>
        <span
          className="glyphicon glyphicon-remove"
          onClick={() => this.props.removeUser(user)}></span>
      </tr>
    )
  }

  showOnline() {
    this.setState({
      show: 'online'
    });
  }

  showOffline() {
    this.setState({
      show: 'offline'
    });
  }

  showAll() {
    this.setState({
      show: 'all'
    });
  }

  render() {
    return (
      <div className='col-sm-4'>
        <div className='text-center'>
          <div className='btn-group btn-group-sm' role='group'>
            <button
              className='btn btn-default'
              onClick={this.showAll.bind(this)}>
              All
            </button>
            <button
              className='btn btn-default'
              onClick={this.showOnline.bind(this)}>
              Online
            </button>
            <button
              className='btn btn-default'
              onClick={this.showOffline.bind(this)}>
              Offline
            </button>
          </div>
        </div>
        <div className='container'>
        <table className='table table-hover'>
          <thead>
            <tr>
              <th>Logo</th>
              <th>Channel</th>
              <th>Status</th>
            </tr>
          </thead>
          {/* <tbody> */}
            <FlipMove
              typeName='tbody' enterAnimation='fade'
              leaveAnimation='fade'>
              {this.props.users.filter(user => {
                const { show } = this.state;
                const { streamData } = user;
                if (show == 'online') {
                  return streamData.stream;
                }
                else if (show == 'offline') {
                  return !streamData.stream;
                }
                else {
                  return user;
                }
              }).map(this.renderUser.bind(this))}
            </FlipMove>
          {/* </tbody> */}
        </table>
      </div>
      </div>
    )
  }
}

function mapStateToProps({ users, initialUsers }) {
  return { users, initialUsers };
}

export default connect(mapStateToProps, { selectUser, fetchUser, removeUser })(UsersList);

Answer 1

只需将maintainContainerHeight="true"添加到flipmove属性

即可

使用React-Flip-Move的假动画问题

1 个答案: