ali-react-table2.0版本并没有这些类名
时间: 2023-08-07 09:04:41 浏览: 49
非常抱歉,我理解有误了。对于ali-react-table 2.0版本,添加过渡效果的方式是不同的。
在ali-react-table 2.0版本中,可以使用`rowExpandable`和`expandedRowRender`属性来实现树形节点的展开和收起。其中,`rowExpandable`用于设置哪些行可以展开,而`expandedRowRender`用于渲染展开后的内容。
要为树形节点添加过渡效果,可以使用CSS的`transition`属性来控制节点高度的变化。具体步骤如下:
1. 在ali-react-table的CSS文件中,为`tbody`元素添加`max-height`属性和`overflow`属性。这样可以控制表格的最大高度和溢出时的显示方式。
2. 在`expandedRowRender`函数中,为展开的内容元素添加`transition: max-height 0.3s ease-in-out`属性。这样可以控制节点高度的平滑变化。
3. 在`rowExpandable`函数中,为可展开的行添加`className`属性,用于控制节点展开/收起状态。
以下是一个样例代码,仅供参考:
```CSS
.ant-table-tbody {
overflow: hidden;
}
.ant-table-row-expand-icon-cell {
cursor: pointer;
}
.ant-table-row-expand-icon-cell > .ant-table-row-expand-icon {
transition: transform 0.3s ease-in-out;
}
.ant-table-row-expand-icon-cell.ant-table-row-expanded > .ant-table-row-expand-icon {
transform: rotate(90deg);
}
.ant-table-row-expand-icon-cell.ant-table-row-collapsed > .ant-table-row-expand-icon {
transform: rotate(0deg);
}
.ant-table-expanded-row {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.ant-table-row-expand-icon-cell.ant-table-row-expanded ~ .ant-table-expanded-row {
max-height: 1000px;
}
```
在上面的代码中,我们为树形节点添加了一个类名`.ant-table-row-expanded`,并使用CSS过渡属性实现了高度的平滑变化。同时,我们也为展开/关闭图标添加了过渡效果,使得图标可以平滑旋转。