ReactJS Semantic UI Transition Module
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.
In this article, we will know how to use the Transition Module in ReactJS Semantic UI. Transition Module is used to add some animation and transition to our components, we can also use them to move in or out of view.
- Transition Group: We can use this to apply transition to children of a group.
- Directional Animations: We can make element to animate in different direction.
- Static Animations: Static animation is unidirectional and elements can be animated by toggling the visible property.
Creating React Application And Installing Module:
- Step 1: Create a React application using the following command.
npx create-react-app foldername
- Step 2: After creating your project folder i.e. foldername, move to it using the following command.
- Step 3: Install semantic UI in your given directory.
npm install semantic-ui-react semantic-ui-css
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
Example 1: It is a basic example which shows how to use transition addons by using ReactJS Semantic UI Transition Module.
Example 2: In this example, we have changed the animation to jiggle in a transition addons by using ReactJS Semantic UI Transition Module.