Reactjs 添加表.行淡出转换

我使用语义UI React在React中构建了一个简单的添加todos系统。目前看起来是这样的：

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;

问题描述，以及我的尝试 当用户单击红色的bin图标时，我想使用淡出转换删除Table.Row。它当前会删除该行，但此处的动画会使用户体验更愉快，使用Transition.Group组件

……但效果不好 在试图独自解决这个问题后，我出现了一些意想不到的行为。首先，行不会消失。而且，所有的表格单元格都是“混合”成一个单元格，这很烦人。看到（可怕的）结果：

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'）；
恒力矩=要求的（‘力矩’）；
从“语义ui反应”导入{表格、复选框、图标、弹出窗口、网格、按钮}；
类Todo扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
const{id，text，completed，createdAt，completedAt}=this.props；
const renderDate=（日期）=>{
常量时间戳=日期；
if（时间戳）
返回`${moment.unix（timestamp.format（'mmmdoyyyy@h:mma'）}`；
返回“”；
}
常量renderPopup=（）=>{
if（completedAt）{
返回(
);
}否则{
返回(
''
);
}
}
返回(
this.props.onToggle（id）}/>
{renderPopup（）}
{text}
{renderDate（createdAt）}
{
这个.props.onRemoveTodo（id）；
此.handleFadeoutItem（）；
}}/>
);
}
}
module.exports=Todo；

组件（之后） 这就是它现在的样子（这显然是错误的！）

const React=require（'React'）；
恒力矩=要求的（‘力矩’）；
从“语义ui反应”导入{表格、复选框、图标、弹出窗口、网格、按钮、转换}；
类Todo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
可见：正确
};
this.handleFadeoutItem=this.handleFadeoutItem.bind（this）；
}
handleFadeoutItem（）{
这是我的国家({
可见：假
});
}
render（）{
const{visible}=this.state；
const{id，text，completed，createdAt，completedAt}=this.props；
const renderDate=（日期）=>{
常量时间戳=日期；
if（时间戳）
返回`${moment.unix（timestamp.format（'mmmdoyyyy@h:mma'）}`；
返回“”；
}
常量renderPopup=（）=>{
if（completedAt）{
返回(
);
}否则{
返回(
''
);
}
}
返回(
this.props.onToggle（id）}/>
{renderPopup（）}
{text}
{renderDate（createdAt）}
{
这个.props.onRemoveTodo（id）；
此.handleFadeoutItem（）；
}}/>
);
}
}
module.exports=Todo；

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

---

编辑

@阿德里安的回答部分解决了我的问题。现在每个细胞都已就位，但动画过渡似乎无法播放。此外，我的“已完成”复选框旁边的日历图标（选中应用程序的初始未修改版本）似乎消失了。知道为什么会发生这两件事吗？见：

---

你需要做两件事

首先，覆盖你的CSS。过渡添加一个

显示：block！重要信息

在您的

上，您需要恢复旧值

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

然后，根据，您需要创建您的

转换。组

不是在

上，而是在其父级上，因此在您的情况下

。以下是一个例子：

<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>

{items.map（item=>(
身份证件
福
酒吧
))}

---

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

动画不起作用的原因是，根据文档，Transition.Group仅在安装/卸载组件时起作用。从Transition.Group标记中删除visible属性。将

as={Table.Row}

更改为

as={Table.Body}

。通过卸载/装载，我的意思是每次向Todo数组中添加新元素时，它应该向页面呈现一个新的Todo行组件，或者它应该删除它，而不是隐藏/显示它

---

*为澄清而编辑

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

正如MEnf所说，

Transition.Group

仅在装载/卸载时工作，在React的上下文中，这意味着动画将在组件作为新的子组件或子组件添加时开始