AllenFang / AllenFang/react-bootstrap-table

Animation on row contraction

Open
#928 5 comments 2 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.2k
Forks
761
PR merge metrics
No merged PRs in 30d

Description

I really love the new expandable-row feature, however I got an issue with it : I can't manage to animate the contraction of a row.

I succeeded to animate the expansion using the following code :
```css
@keyframes EXPAND {
0% { height: 0; }
100% { height: 300px; }
}

.react-bs-container-body tr:nth-child(2n+2):not([hidden]) td div {
animation: EXPAND 1s;
height: 300px;
}
```
This code isn't great but does the job, however I haven't been able to animate contraction using the same method.

I think it's because the `hidden` attribute is added instantly to the `tr` element before any animation can be performed.

Any idea ?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.