Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Collapse] Duration prop is not applying

See original GitHub issue

Describe the bug No matter what I do, changing the duration value on a <Collapse /> component doesn’t seem to have any effect

Expected Behavior … it should have an effect

Link to minimal reproduction https://codesandbox.io/s/eloquent-lumiere-0glyc?fontsize=14&hidenavigation=1&theme=dark

Steps to Reproduce:

Create a <Collapse> and fill it with a lot of content
Add a duration prop and set to some high value, say 10 seconds (10000)

Suggested solution(s) N/A

Desktop (please complete the following information):

OS: Mac OS 10.15.5
Browser: Chrome 83

Additional context N/A

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:6 (3 by maintainers)

Top GitHub Comments

20reactions

oncetcommented, Jul 31, 2021

This is what I was looking for:

transition={{ enter: { duration: 5 } }}

Thanks for such great tool!

14reactions

avalanche1commented, Dec 31, 2021

@segunadebayo there is still no visible way in the docs to modify transition duration

Top Results From Across the Web

React-Bootstrap Collapse button not working - Stack Overflow

a child component is getting redrawn when there is no change to its props by the parent (as you can see the extra...

visibility - CSS: Cascading Style Sheets - MDN Web Docs

The visibility CSS property shows or hides an element without changing the ... For other elements, collapse is treated the same as hidden...

React Transition Group

The Transition component lets you describe a transition from one component state to another over time with a simple declarative API.

Collapse | Components - BootstrapVue

Collapse. Easily toggle visibility of almost any content on your pages in a vertically collapsing container. Includes support for making accordions.

Transition | Vue.js

<Transition> for applying animations when an element or component is ... an explicit transition duration (in milliseconds) using the duration prop on the ......