Módulo de transición de interfaz de usuario semántica de ReactJS

La interfaz de usuario semántica es un marco moderno que se utiliza para desarrollar diseños perfectos para el sitio web. Brinda al usuario una experiencia liviana con sus componentes. Utiliza el lenguaje CSS, JQuery predefinido para incorporar en diferentes marcos.

En este artículo, sabremos cómo usar el módulo de transición en la interfaz de usuario semántica de ReactJS. El módulo de transición se usa para agregar algo de animación y transición a nuestros componentes, también podemos usarlos para entrar o salir de la vista.

Propiedades:

  • Grupo de transición: podemos usar esto para aplicar la transición a los niños de un grupo.

Exploradores:

  • Animaciones direccionales: podemos crear elementos para animar en diferentes direcciones.
  • Animaciones estáticas: la animación estática es unidireccional y los elementos se pueden animar alternando la propiedad visible.

Sintaxis:

<Transition />

Creación de la aplicación React e instalación del módulo:

  • Paso 1: Cree una aplicación React usando el siguiente comando.
    npx create-react-app foldername
  • Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.
    cd foldername
  • Paso 3: instale la interfaz de usuario semántica en su directorio dado.
     npm install semantic-ui-react semantic-ui-css

Estructura del proyecto : Se verá como lo siguiente.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: es un ejemplo básico que muestra cómo usar complementos de transición mediante el módulo de transición de IU semántica de ReactJS.

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>
    )
  }
}

Producción: 

Ejemplo 2: en este ejemplo, hemos cambiado la animación para que se mueva en complementos de transición mediante el módulo de transición de interfaz de usuario semántica de ReactJS.

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>
    )
  }
}

Producción:

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

Publicación traducida automáticamente

Artículo escrito por taran910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *