reactjs - 添加 Table.Row 淡出过渡

Question

我使用 Semantic-UI-React 在 React 中构建了一个简单的添加待办事项系统。目前看起来是这样的:

问题描述，以及我的尝试

当用户单击红色垃圾箱图标时，我想使用淡出过渡删除 Table.Row。目前它会删除该行，但这里的动画将使用户体验更加愉快。 I've visited the docs and tried to implement the solution ，使用 Transition.Group 组件。

...但效果不佳

在尝试自己解决这个问题后，我得到了一些意想不到的行为。首先，行不会淡出。此外，所有 Table.Cell 类型都“混合”到一个单元格中，这很烦人。查看(可怕的)结果:

Todo 组件(之前)

每个 Todo 行都使用 Todo 组件动态添加到表中，在实现 Transition.Group 之前，该组件看起来像这样:

const React = require('react');
const moment = require('moment');
import { Table, Checkbox, Icon, Popup, Grid, Button } from 'semantic-ui-react';

class Todo extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { id, text, completed, createdAt, completedAt } = this.props;
        const renderDate = (date) => {
            const timestamp = date;
            if (timestamp)
                return `${moment.unix(timestamp).format('MMM Do YYYY @ h:mm a')}`;
            return '';
        }

        const renderPopup = () => {
            if (completedAt) {
                return (
                    <Popup  trigger={<Icon name="calendar check" size="large"/>} header={'Completed at'} content={renderDate(completedAt)}/>
                );
            } else {
                return (
                    ''
                );
            }
        }

        return (
            <Table.Row>
                <Table.Cell>
                    <Grid columns="equal">
                        <Grid.Column width={3}>
                            <Checkbox toggle
                            defaultChecked={completed}
                            onClick={() => this.props.onToggle(id)} />
                        </Grid.Column>
                        <Grid.Column textAlign="left">
                            {renderPopup()}
                        </Grid.Column>
                    </Grid>
                </Table.Cell>
                <Table.Cell>{text}</Table.Cell>
                <Table.Cell>{renderDate(createdAt)}</Table.Cell>
                <Table.Cell textAlign="right">
                    <Button basic color="red" icon="trash"
                            onClick={() => {
                                this.props.onRemoveTodo(id);
                                this.handleFadeoutItem();
                                }}/>
                </Table.Cell>
            </Table.Row>
        );
    }
}

module.exports = Todo;

组件(之后)

这就是现在的样子(这显然是错误的!):

const React = require('react');
const moment = require('moment');
import { Table, Checkbox, Icon, Popup, Grid, Button, Transition } from 'semantic-ui-react';

class Todo extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: true
        };

        this.handleFadeoutItem = this.handleFadeoutItem.bind(this);
    }

    handleFadeoutItem () {
        this.setState({
            visible: false
        });
    }

    render() {
        const { visible } = this.state;
        const { id, text, completed, createdAt, completedAt } = this.props;
        const renderDate = (date) => {
            const timestamp = date;
            if (timestamp)
                return `${moment.unix(timestamp).format('MMM Do YYYY @ h:mm a')}`;
            return '';
        }

        const renderPopup = () => {
            if (completedAt) {
                return (
                    <Popup  trigger={<Icon name="calendar check" size="large"/>} header={'Completed at'} content={renderDate(completedAt)}/>
                );
            } else {
                return (
                    ''
                );
            }
        }

        return (
            <Transition.Group as={Table.Row} visible={visible} animation="fade" duration={500}>
                <Table.Row>
                    <Table.Cell>
                        <Grid columns="equal">
                            <Grid.Column width={3}>
                                <Checkbox toggle
                                defaultChecked={completed}
                                onClick={() => this.props.onToggle(id)} />
                            </Grid.Column>
                            <Grid.Column textAlign="left">
                                {renderPopup()}
                            </Grid.Column>
                        </Grid>
                    </Table.Cell>
                    <Table.Cell>{text}</Table.Cell>
                    <Table.Cell>{renderDate(createdAt)}</Table.Cell>
                    <Table.Cell textAlign="right">
                        <Button basic color="red" icon="trash"
                                onClick={() => {
                                    this.props.onRemoveTodo(id);
                                    this.handleFadeoutItem();
                                    }}/>
                    </Table.Cell>
                </Table.Row>
            </Transition.Group>
        );
    }
}

module.exports = Todo;

我们将非常感谢您提供的任何帮助!

<小时/>

编辑

@Adrien 的回答部分解决了我的问题。现在每个单元格都就位了，但动画过渡似乎没有播放。此外，我的“已完成”复选框旁边的日历图标(检查应用程序的初始未修改版本)似乎消失了。知道为什么会发生这两件事吗？请参阅:

Answer 1

您需要做两件事。

首先，覆盖您的 CSS。过渡添加 display: block !important在您的<Table.Row>上，需要恢复旧值。

.table tr.visible.transition {
  display: table-row !important;
}

然后根据the docs ，您需要创建您的 Transition.Group不在<Table.Row>上但在其父级上，所以 <Table.Body>在你的情况下。这是一个例子:

<Transition.Group
    as={Table.Body}
    duration={200}
>
    {items.map(item => (
        <Table.Row>
            <Table.Cell>id</Table.Cell>
            <Table.Cell>foo</Table.Cell>
            <Table.Cell>bar</Table.Cell>
        </Table.Row>
    ))}
</Transition.Group>

您可以找到一个实例 here查看不同的步骤。