Создание простой анимации в React-Pose

У меня возникли проблемы с созданием простой анимации в React-Pose. Две проблемы

1) Я не могу вернуть анимацию в исходное состояние. Переменная зависания меняется на false, когда мышь уходит, но анимация не меняется обратно.

2) Я не могу манипулировать анимацией, я хотел, чтобы она была более продолжительной и, возможно, более легкой или что-то в этом роде, но это просто мгновенная привязка к статусу зависания.

import React, { useState } from 'react';
import styled from 'styled-components';
import posed from 'react-pose';
import { render } from 'react-dom';

const UpFor = () => {

const [hovering, setHovering] = useState(false);

const HoverContainer = posed.div({
    hoverable: true
})

const Container = styled(HoverContainer)`
font-family: 'Baumans';
font-size: 220px;
display: flex;
cursor: pointer;
`

const Up = styled.div`
color: #81D6E3;`

const Four = styled.div`
color: #FF101F
`
const Fours = styled.div`
display: flex;
`
const MirroredFour = posed.div({
unhovered: {transform: 'rotatey(0deg)'},
hovered: {transform: 'rotateY(180deg)',
        transition: {
            type: 'tween',
            duration: '2s'
        }}
})

const SecondFour = styled(MirroredFour)`
color: #FF101F
position: absolute;
transform-origin: 67%;
`


return (
    <Container onMouseEnter = {() => {setHovering({ hovering: true }), console.info(hovering)}}
               onMouseLeave = {() => {setHovering({ hovering: false }), console.info(hovering)}}>
         <Up>Up</Up><Fours><Four>4</Four>
                <SecondFour pose = {hovering ? "hovered" : "unhovered"}
                >4</SecondFour></Fours>
    </Container>)
}

export default UpFor

reactjs animation react-hooks

23.02.2019 22:28

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

315

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем коде было две основные проблемы:

duration не поддерживает строковые значения, такие как «2s». Я изменил это на 2000.
Вы определяли свои компоненты (например, используя styled.div, posed.div) внутри функции рендеринга. Это привело к тому, что React обрабатывал эти компоненты как уникальные типы компонентов при каждом повторном рендеринге. Это приводит к тому, что эти компоненты размонтируются и повторно монтируются при каждом рендеринге, что препятствует работе переходов, поскольку элемент не меняется — вместо этого он заменяется новым компонентом другого типа.

Ниже приведена рабочая версия вашего кода, которая перемещает определения компонентов за пределы функции рендеринга (UpFor). Вы можете поиграть с ним в предоставленной песочнице.

import React, { useState } from "react";
import styled from "styled-components";
import posed from "react-pose";

const Container = styled.div`
  font-family: "Baumans";
  font-size: 220px;
  display: flex;
  cursor: pointer;
`;

const Up = styled.div`
  color: #81d6e3;
`;

const Four = styled.div`
  color: #ff101f;
`;
const Fours = styled.div`
  display: flex;
`;
const MirroredFour = posed.div({
  unhovered: { transform: "rotateY(0deg)" },
  hovered: {
    transform: "rotateY(180deg)",
    transition: {
      type: "tween",
      duration: 2000
    }
  }
});

const SecondFour = styled(MirroredFour)`
color: #FF101F
position: absolute;
transform-origin: 67%;
`;

const UpFor = () => {
  const [hovering, setHovering] = useState(false);

  console.info("hovering", hovering);
  return (
    <Container
      onMouseEnter = {() => {
        setHovering(true);
      }}
      onMouseLeave = {() => {
        setHovering(false);
      }}
    >
      <Up>Up</Up>
      <Fours>
        <Four>4</Four>
        <SecondFour pose = {hovering ? "hovered" : "unhovered"}>4</SecondFour>
      </Fours>
    </Container>
  );
};

export default UpFor;

Edit Pose