Question

目标：我真的很沮丧，并且一直在寻找帖子数小时，找不到真正的解决方案。我正在尝试动画化表格行的高度，以在单击时扩展/折叠。我认为应该有一个足够简单的解决方案...男孩，我错了。

理想情况下，由于每行将存储大量额外数据，因此我想加载数据，扩展该单行，然后在折叠时删除数据。

问题： 我设法使动画效果很好！我很兴奋，才发现当我的行数超过3时，它变得非常不连贯/缓慢。我找不到任何修复方法。

这里是一个沙箱https://codesandbox.io/s/0ql5vp13qv，或者如果您想立即查看管理动画的代码，则为我的代码：

import React, { Component } from 'react'
import { CSSTransition } from 'react-transition-group';

import Icon2 from '../Icon';

import * as Styled from './styles'

export default class CourseRow extends Component {
  state = {switched: false};

  selectCourse = () => {
    this.setState(({switched}) => ({switched: !switched}));
  }

  render() {
    return (
         <Styled.Row onClick={this.selectCourse}>
            <Styled.InnerRow>
                <Styled.Field light>CSCI 1000</Styled.Field>
                <Styled.Field>Computer Science 1</Styled.Field>
                <Styled.Field>Explore algorithms and data structures that...</Styled.Field>
                <Styled.Field><Styled.DropdownButton ><Icon2 icon="up_arrow"/></Styled.DropdownButton></Styled.Field>
            </Styled.InnerRow>
            <CSSTransition
            classNames="fade"
            timeout={300}
            key={this.props.Title}
            in={this.state.switched}
            unmountOnExit
            >
                <div>
                    test<br/>test<br/>test<br/>
                </div>
            </CSSTransition>
        </Styled.Row>
  );
  }
}

import styled from 'styled-components';
import Button from 'components/Button';

const columns = "1.5fr 2.5fr 5fr 3fr";

export const DropdownButton = styled(Button)`
    
    background-color: blue;
`;


export const InnerRow = styled.div`
    display: grid;
    grid-template-columns: ${columns};
    grid-column-gap: 1rem;
    grid-row-gap: 0;
    padding-top: ${props => props.heading ? '2.25rem' : '1.5rem'};
    padding-bottom: ${props => props.heading ? '2rem' : '1.5rem'};
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-top: ${props => props.heading ? 'none' : '1px solid #E8E8E8'};
    cursor: ${props => props.heading ? 'default' : 'pointer'};
`;

export const Row = styled.div`
    &:hover {
        background-color: #f7faff;
        color: #1873EA;
    }

    & .fade-enter {
      overflow-y: hidden;
      max-height: 0;
    }
    
    & .fade-enter-active {
      max-height: 200px;
      transition: all 200ms ease;
    }
    & .fade-exit {
      max-height: 200px;
    }
    & .fade-exit-active {
      max-height: 0;
      overflow-y: hidden;
      transition: all 200ms ease;
    }
`;

export const Field = styled.span`
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: ${props => props.light ? '400' : '300'};
    &:last-of-type {
        justify-content: flex-end;
    }
`;

我认为也许在元素/过渡中添加键会有所帮助，但是仍然没有任何作用...

我拍了比较视频，以便您了解我在说什么。

这是1行： https://www.youtube.com/watch?v=E6Db7nuqlgk&feature=youtu.be

大约有6行： https://www.youtube.com/watch?v=Troba8eIqKA&feature=youtu.be

不稳定的高度CSSTransition与多个项目反应

0 个答案: