2

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

转换前尝试

问题描述和我的尝试

当用户单击红色 bin 图标时，我想使用 Fadeout Transition 删除 Table.Row。它当前会删除该行，但此处的动画将使用户体验更加愉快。我访问了文档并尝试使用 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 的回答部分解决了我的问题。现在每个单元格都在其位置，但动画过渡似乎没有播放。此外，我的“已完成”复选框（检查应用程序的初始、未修改版本）旁边的日历图标似乎消失了。知道为什么会发生这两件事吗？看：

仍然不太正确

4

3 回答 3

4

你需要做两件事。

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

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

然后，根据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>

您可以在此处找到一个实时示例以查看不同的步骤。

于 2017-08-12T17:34:52.837 回答
2

以前的答案已经为您指明了正确的方向。我做了一个最小的例子来展示它是如何工作的。

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

于 2017-08-15T11:08:47.903 回答
1

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

*为澄清而编辑

于 2017-08-14T21:19:06.133 回答