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.

Properties:

• Transition Group: We can use this to apply transition to children of a group.

Explorers:

• 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.

Syntax:

<Transition />

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.

  cd foldername

• 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.

npm start

Example 1: It is a basic example which shows how to use transition addons by using ReactJS Semantic UI Transition Module.

App.js

import React, {Component}from 'react'
import { Button, Divider, Icon, Transition } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

<br/>

export default class gfg extends Component {
  state = { visible: true }

  gfg1 = () =>
    this.setState((prevState) => ({ visible: !prevState.visible }))

  render() {
    const { visible } = this.state

    return (
      <div>
        <Button
          content={visible ? 'Click here to hide' : 'Click here to show'}
          onClick={this.gfg1}
        />
        <Divider />
        <Transition visible={visible} animation='scale' duration={700}>
          <Icon size='huge' name='html5' />
        </Transition>
      </div>
    )
  }
}

Output: 

Example 2: In this example, we have changed the animation to jiggle in a transition addons by using ReactJS Semantic UI Transition Module.

App.js

import React, {Component}from 'react'
import { Button, Icon, Transition } from 'semantic-ui-react'

const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);

<br/>

export default class gfg extends Component {
  state = { visible: true }

  gfg1 = () =>
    this.setState((btt) => ({ visible: !btt.visible }))

  render() {
    const { visible } = this.state

    return (
      <div>
        <Button
          content={visible ? 'Click here' : 'Click here'}
          onClick={this.gfg1}
        />
        <br/>
        <Transition visible={visible} animation='jiggle' duration={250}>
          <Icon size='huge' name='js' />
        </Transition>
      </div>
    )
  }
}

Output:

Reference: https://react.semantic-ui.com/modules/transition