Reactjs 以反应姿势创建简单动画

在React姿势中创建简单动画时遇到问题。这两个问题是

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

import React，{useState}来自“React”；
从“样式化组件”导入样式化；
从“反应姿势”导入姿势；
从'react dom'导入{render}；
常量UpFor=（）=>{
常量[悬停，设置悬停]=useState（false）；
const HoverContainer=posed.div({
可悬停：正确
})
const Container=styled（HoverContainer）`
字体系列：“Baumans”；
字体大小：220px；
显示器：flex；
光标：指针；
`
const Up=styled.div`
颜色：#81D6E3`
const Four=styled.div`
颜色：#FF101F
`
const Fours=styled.div`
显示器：flex；
`
const MirroredFour=posed.div({
未覆盖：{transform:'rotatey（0deg）}，
悬停：{transform:'rotateY（180度）'，
过渡：{
类型：“tween”，
持续时间：“2s”
}}
})
const SecondFour=styled（MirroredFour）`
颜色：#FF101F
位置：绝对位置；
转化来源：67%；
`
返回(
{setHovering（{hovering:true}），console.log（hovering）}
onMouseLeave={（）=>{setHovering（{hovering:false}），console.log（hovering）}>
Up4
4.
)
}
导出默认UpFor

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

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

import React，{useState}来自“React”；
从“样式化组件”导入样式化；
从“反应姿势”导入姿势；
const Container=styled.div`
字体系列：“鲍曼”；
字体大小：220px；
显示器：flex；
光标：指针；
`;
const Up=styled.div`
颜色：#81d6e3；
`;
const Four=styled.div`
颜色：#ff101f；
`;
const Fours=styled.div`
显示器：flex；
`;
const MirroredFour=posed.div({
未覆盖：{transform:“rotateY（0deg）”}，
悬停：{
变换：“旋转（180度）”，
过渡：{
类型：“tween”，
持续时间：2000年
}
}
});
const SecondFour=styled（MirroredFour）`
颜色：#FF101F
位置：绝对位置；
转化来源：67%；
`;
常量UpFor=（）=>{
常量[悬停，设置悬停]=useState（false）；
log（“悬停”，悬停）；
返回(
{
设置悬停（真）；
}}
onMouseLeave={（）=>{
设置悬停（假）；
}}
>
向上的
4.
4.
);
};
导出默认UpFor；

---

非常感谢您，我花了很多精力想弄明白！：D