React animate Accordion with react-router-dom
I’ve set up an accordion that works nicely with react-dom-router. It’s got a bit of an unusual structure as the Navlink are inside each accordion body
https://codesandbox.io/s/youthful-wood-7ovuo?file=/src/components/Case/index.js
With the intention to animate the accordion when they open and close. I’ve setup CSSTransition from react-transition-group. Now CSSTransition exposes the corresponding CSS classes such as:
.caseTransition-enter { opacity: 0; } .caseTransition-exit { opacity: 1; } And the implementation looks like:
<Route exact path={item.url} children={({ match, ...rest }) => ( <CSSTransition in={match} timeout={1000} classNames="caseTransition" mountOnEnter unmountOnExit> <Layout> <Tag data={data} /> </Layout> </CSSTransition> )} /> But the problem is that I would ideally need these properties to be applied to the parent element. Somehow.
In the screenshot you can see the CSS properties being applied inside each accordion header. But I want the dynamic CSS classes to be applied to the accordion header itself ([data-section])
The reason for that is that I’m planning on animating flex-basis properties to open and close the accordions. Kind of like this pseudocode:
.[data-section]enter { flex: 1; } .[data-section]exit { flex: 0; } Is this something easy to implement with CSSTransition? Is this related? Programmatically navigate using react router
Thanks!
