Изменчивая высота CSSTransition реагирует с несколькими предметами - PullRequest
Новая
       7

Изменчивая высота CSSTransition реагирует с несколькими предметами

0 голосов
/ 11 сентября 2018

Цель : Я очень расстроен, часами копался в постах и ​​не могу найти реального решения.Я пытаюсь анимации высоты строки таблицы, чтобы развернуть / свернуть при нажатии на.Я подумал, что должно быть достаточно простое решение ... Мальчик, я был неправ.

В идеале, поскольку в каждой строке будет храниться довольно много дополнительных данных, я хотел бы загрузить данные, расширить иходна строка, затем удалите данные, когда они свернуты.

Задача : Мне удалось добиться отличной анимации !!Я был так взволнован, только чтобы узнать, что, когда у меня больше ~ 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

...