添加 Table.Row 淡出过渡

Question

我使用 Semantic-UI-React 在 React 中构建了一个简单的 add-your-todos 系统。目前看起来是这样的：

问题描述和我的尝试

当用户点击红色 bin 图标时，我想使用淡出转换删除 Table.Row。它当前会删除该行，但此处的动画将使用户体验更加愉快。 I've visited the docs and tried to implement the solution，使用 Transition.Group 组件。

...但效果不佳

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

Todo 组件（之前）

每个 Todo 行都使用 Todo 组件动态添加到 Table 上，在实现 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。过渡在你的<Table.Row>上添加一个display: block !important，你需要恢复旧值。

.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 以查看不同的步骤。

Answer 2

以前的答案已经为您指明了正确的方向。我制作了一个 minimal 示例来说明它是如何工作的。

正如 MEnf 所说，Transition.Group 仅适用于挂载/卸载，在 React 上下文中，这意味着动画将在组件作为新子组件添加或删除时开始。

Answer 3

您的动画不工作的原因是因为根据文档，Transition.Group 仅在安装/卸载组件时才有效。从 Transition.Group 标记中删除可见属性。将as={Table.Row} 更改为as={Table.Body}。通过卸载/挂载，我的意思是每次将新元素添加到 Todo 数组时，它都应该向页面呈现一个新的 todo 行组件，或者应该删除它而不是隐藏/显示它。

*为澄清而编辑