添加 Table.Row 淡出过渡

Question

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

问题描述，以及我的尝试

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

...但效果不佳

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

Todo 组件（之前）

使用 Todo 组件在 Table 上动态添加每个 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 的回答部分解决了我的问题。现在每个单元格都在其位置，但动画过渡似乎没有播放。此外，我的 "completed" 复选框旁边的日历图标（检查应用程序的初始、未修改版本）似乎消失了。知道为什么会发生这两件事吗？参见：

Answer 1

你需要做两件事。

首先，覆盖您的 CSS。 transition 在你的 <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

您的动画不工作的原因是因为根据文档，Transition.Group 仅在 mounting/unmounting 组件时才工作。从 Transition.Group 标签中删除可见属性。将 as={Table.Row} 更改为 as={Table.Body}。 unmounting/mounting 我的意思是每次将一个新元素添加到您的 Todo 数组时，它应该将一个新的待办事项行组件呈现到页面或者它应该删除它而不是 hiding/showing 它。

*编辑澄清

Answer 3

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

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

添加 Table.Row 淡出过渡

Adding Table.Row fadeout transition

reactjs

semantic-ui

semantic-ui-react

问题描述，以及我的尝试

...但效果不佳

Todo 组件（之前）

组件（之后）