在React-Pose中创建一个简单的动画

Question

我无法在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.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

Answer 1

您的代码存在两个主要问题：

1. set of integer似乎不支持字符串值，例如'2s'。我将其更改为duration。
2. 您要在渲染函数中定义组件（例如，使用2000，styled.div）。这导致这些组件在每次重新渲染时被React视为唯一的组件类型。这样会导致每个渲染器都卸载并重新安装这些组件，这会阻止过渡工作，因为元素没有更改-而是由其他类型的新组件替换。

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

UpFor