Saltar al contenido

Las animaciones en React React usando la primavera LibraryDec, 17thIn este tutorial, vamos a aprender acerca de la manera de animar el reaccionan …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo animar el reaccionan elementos reaccionan mediante el uso de la biblioteca de animación primavera.

Introducción

En primer lugar, estamos creando nuestra aplicación utilizando la herramienta reaccionar-crear-reaccionar aplicación de línea de comandos.

Abra su terminal y ejecute los comandos a continuación para instalar reaccionar app.

npx create-react-app react-animations

Este comando instalará por encima de reaccionar app archivos relacionados en reaccionar-animaciones carpeta.

cd react-animations

cambiar el directorio de trabajo para reaccionar animaciones.

npm start # to run the react development server

Instalación Reaccionar biblioteca primavera

vamos a instalar la biblioteca de animación reaccionar de la primavera en nuestro reaccionan aplicación.

Ejecutar el comando siguiente para instalar reaccionar primavera-biblioteca.

npm i react-spring

simple Animación Ejemplo

Una vez que ha instalado con éxito por encima de los paquetes Vamos a crear nuestra primera animación simple.

Borrar todo presente en el interior de su app.js y añada el siguiente código.

import React from "react";
import { Spring } from "react-spring";
import "./styles.css";

function App() {
return (
{props => (

My first posts

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Cupiditate rerum reprehenderit consectetur porro similique
reiciendis ex consequuntur tempore! Similique, pariatur
harum.Facilis, accusantium quam labore incidunt soluta
suscipit ipsa omnis.

)}

);
}

export default App;

En el componente de la primavera por encima de lo primero que importa desde el ‘reaccionar de la primavera’ Dentro del componente de muelle que pasa funcionan como niños y que nos proporciona la función de los APOYOS parámetro.

Pasamos los puntales parámetro para div elemento de atributo de estilo. componente

El resorte se utiliza para mover los elementos de un lugar a otro lugar, itaccepts dos apoyos desde y hacia.

de : donde la animación se inicia de .

a : ¿Dónde animación necesita a extremo .

Ouput:

Animating variedad de artículos Ejemplo

veces necesitamos para animar variedad de artículos para que necesitamos para importar Trail componente de la biblioteca ‘reaccionar-primavera’. componente

El Camino anima el primer elemento de la lista de elementos, el resto de elementos forman un sendero natural y siga su hermano anterior. componente

import React from "react";
import { Trail } from "react-spring";
import "./styles.css";

const posts = [
{ title: "My first post", id: 1 },
{ title: "My second post", id: 2 },
{ title: "My Third post", id: 3 },
{ title: "My Fourth post", id: 4 }
];

function AllPosts() {
return (
post.id} from={{ marginLeft: -20, opacity: 0 }} to={{ marginLeft: 20, opacity: 1 }} > {post => props => (

{post.title}

)}

);
}

export default AllPosts;

Trail acepta cuatro puntales artículos, llaves, desde ya. artículos

: Se necesita la matriz de elementos tenemos que animar. llaves

: Tenemos que pasar el puntal clave única para cada elemento de la matriz.

Salida: animado de

Animación de navegación Ejemplo de barra

Let la barra de navegación mediante el uso de componentes de primavera.

import React from "react";
import ReactDOM from "react-dom";
import {Spring,config} from "react-spring";
import "./styles.css";

function NavBar() {
return (
{props => (

)}

);
}

export default NavBar;

En el código anterior que pasó en el alojamiento Número de = {{número: 0}} y {{a = Número: 100}} apoyos para que las aperturas de componentes primavera contador de 0 a 100.

Nos accesed la propiedad de número en el elemento div utilizando props.number.

Salida: