在React-Pose中创建一个简单的动画 [英] Creating a simple animation in React-Pose

问题描述

我无法在React-Pose中创建简单的动画。这两个问题是

I'm having trouble creating a simple animation in React-Pose. The two problems are

1）我无法使动画恢复到初始状态。鼠标离开时，悬停变量将更改为false，但动画不会变回原来的状态。

1) I can't get the animation to revert to the initial condition. The hovering variable is changing to false when the mouse leaves, but it the animation doesn't change back.

2）我无法操纵动画，我想持续时间更长，可能会轻松一些，但只是瞬间显示悬停状态。

2) I can't manipulate the animation, I wanted to have a longer duration and maybe an ease out or something, but its just an instant snap to the hovered status.

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.log(hovering)}}
               onMouseLeave={() => {setHovering({ hovering: false }), console.log(hovering)}}>
         <Up>Up</Up><Fours><Four>4</Four>
                <SecondFour pose={hovering ? "hovered" : "unhovered"}
                >4</SecondFour></Fours>
    </Container>)
}

export default UpFor

推荐答案

您的代码有两个主要问题：

There were two main issues with your code:

1. duration 似乎不支持'2s'之类的字符串值。我将其更改为 2000 。


2. 您正在定义组件（例如，使用 styled.div ， posed.div ）。这导致这些组件在每次重新渲染时被React视为唯一的组件类型。这会导致这些组件被卸载并在每个渲染器上重新安装，这会阻止过渡工作，因为元素没有更改-而是由其他类型的新组件替换。

1. duration does not appear to support string values like '2s'. I changed this to 2000.
2. You were defining your components (e.g. using styled.div, posed.div) inside of your render function. This caused these components to be treated by React as unique component types with each re-render. This results in those components being unmounted and re-mounted each render which prevents transitions from working since the element isn't changing -- instead it is being replaced by a new component of a different type.

下面是代码的有效版本，该组件将组件定义移至渲染（ UpFor ）函数之外。您可以在提供的沙箱中使用它。

Below is a working version of your code which moves the component definitions outside of the render (UpFor) function. You can play around with it in the sandbox provided.

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.log("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;

这篇关于在React-Pose中创建一个简单的动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！