我使用 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 的回答部分解决了我的问题。现在每个单元格都就位了,但动画过渡似乎没有播放。此外,我的“已完成”复选框旁边的日历图标(检查应用程序的初始未修改版本)似乎消失了。知道为什么会发生这两件事吗?请参阅:
最佳答案
您需要做两件事。
首先,覆盖您的 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查看不同的步骤。
关于reactjs - 添加 Table.Row 淡出过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45651427/