disable react css transition group on certain events

Question

I currently have a dashboard type app that pulls messages out of multiple slack channels and displays the ones without any replies or emojis. You can change which channel you want to view.

Currently, the parent state looks something like this:

state = {
        selected_channel: window.localStorage.getItem( 'last-slack-ch' ) || 'ABC123'
        selected_date: new Date(),
        channels: {},
        items: [],
        slack_users: {},
        settings: {
            seconds_per_slack_messages_pull: 1
        },
        atBottom: false
    }

After pulling in the messages... or items, I pass that array into a component ItemsContainer.

This is the render method in ItemsContainer

render() { 

        return (
            <div className="items-container">
                {
                    this.props.items.length > 0 ?
                        <ReactCSSTransitionGroup
                            transitionName='item'
                            transitionEnterTimeout={500}
                            transitionLeaveTimeout={500}>
                        {
                            this.props.items.map( t => { 
                                return (
                                    <Item 
                                        key={ t.usr + '_' + t.ts } 
                                        task={ t } 
                                        user={ this.props.slack_users[ t.usr ] } 
                                        settings={ this.props.settings } 
                                    /> 
                                )
                            } )
                        }
                        </ReactCSSTransitionGroup>
                    :
                        <p className='nothing-found'>No items were found in channel: { this.props.selected_channel }</p>
                }

            </div>
        );
    }

The issue I am currently facing is that there are certain events that I don't want to have a transition. Stuff like: Initial page load and switching channels.

I tried passing in some props to ItemsContainer which will determine what transitionName to the ReactCSSTransitionGroup... but things didnt really work too well.

Anyone have experience with this?

Have you tried `transitionEnter={false}` or `transitionLeave={false}` to disable animation? https://reactjs.org/docs/animation.html#disabling-animations — chin8628, Sep 30 '19 at 16:34
wouldnt that disable the transition entirely though. I still need the transitions when new messages come in. @chin8628 — Syn, Sep 30 '19 at 18:08

score 1 · Answer 1 · answered Oct 09 '20 at 04:57

It's hard to tell from your code exactly how you would implement it, but you could add a key property to the top-level div in your ItemsContainer component. The key property is usually used to identify children in collections but can be used outside of those cases. When a key changes, React creates a new component instance rather than re-render the existing (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key).

So try re-writing ItemsContainer as:

render () {
  return (
    <div className="items-container" key={this.props.selected_channel}>
      // Transition code that will only apply within the selected channel.
    </div>
  );
}

This should solve the switching-channel problem. So when ItemsContainer receives a new props.selected_channel value you should avoid the transition animations.

disable react css transition group on certain events

1 Answers1