How to do an ease in transition after a react if statement

user_14837632 0
Viewed 38

I'm trying to create a catalogue which has a filter component. Once the filter button is clicked, it triggers a variable to turn true which then switches what is being shown on the screen. I want to know how I can make this switch smooth and ease in using css. Here is my code:

<div>
                {this.state.showProjects === true &&
                    <div className="test">
                        {this.state.projects && this.state.projects.map((project) => (
                            <ProjectDetails key={project._id} project={project}/>
                        ))}
                    </div>
                }
                {this.state.showProjects === false &&
                    <div className="initial-screen"> 
                        Enter filter options to get started!
                    </div>
                }
                
            </div>

Where and how should I incorporate the css ease property?

reactjs css
1 Answers

If I'm understanding what your ask is, you can implement a class-based solution that has your transition effects in there.

<div>
    <div className=`test content ${this.state.showProjects && 'active'}`>
        {this.state.projects && this.state.projects.map((project) => (
            <ProjectDetails key={project._id} project={project}/>
         ))}
     </div>
     <div className=`initial-screen content ${!this.state.showProjects && 'active'}`> 
         Enter filter options to get started!
     </div> 
</div>

I added another class called content which would have the main transition styling that you would need for your animations. The active class would be your identifier as to what is currently being displayed.

.content {
    opacity: 0;
    transition-duraction: 2s;
    transition-timing-function: ease;

    &.active {
        opacity: 100;
    }
}

This would just add a simple fade-in/fade-out, but you can use this at a simple template for you to use to start adding in more styling; like movement.

user_122041070
Related