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.

Breaks CSSTransitionGroup enter animations

See original GitHub issue

When using react-select I’m seeing enter animations breaking. They simply don’t animate. The leave animations continue to work. If I remove the Select component from my view the animations start working again.

Issue Analytics

State:
Created 8 years ago
Reactions:8
Comments:15

Top GitHub Comments

4reactions

twheyscommented, Sep 17, 2019

@gwyneplaine Could you please reopen this ticket given that @OwenFlood has posted a codesandbox link? This bug is still a thing.

2reactions

saltnpixelscommented, Dec 1, 2020

I made a useEffect that change the isSearchable to true after 1 millisecond…

const [isSearchable, setIsSearchable] = useState(false)
setTimeout(() => {
         setIsSearchable(true)
      }, 1)

But ultimately this needs a real fix…

Top Results From Across the Web

Animating React with React Transition Group - Bits and Pieces

React Transition Group is a lower-level type of animation library. ... The transition component tracks the “enter” and “exit” states for the ...

How to use React CSS Transition Group for Animations

Learn more advanced front-end and full-stack development at: https://www.fullstackacademy.comIn this video, Corryn Young explores how to use ...

Transitions with react-transition-group

Allows you to declare transitions and animations to happen when a ... needed to tell the Transition to trigger the enter or exit...

React transition group - Don't animate children - Stack Overflow

I'm using react-transition-group to animate a router switch in React: < ...

React Css Transition Group Enter Leave Animation - StackBlitz

'react-addons-css-transition-group';. class App extends Component {. constructor(props) {. super(props);. this.state = {. items: ['Item 1...', 'Item 2.