简单的反应姿势不透明度过渡不起作用

Question

我是 react-pose 的新手，我尝试了一个简单的方法，但转换不起作用。

我只想在 2 个状态之间进行转换。

喜欢opacity 0 => 1

我想将它与 const 一起使用，所以我使用了新的 React 钩子。

import React, { useState } from 'react';
import posed from 'react-pose';

const Pop = () => {
  const [position, setPosition] = useState(false);
  const Box = posed.div({
    left: { x: 0 },
    right: { x: 100 }
  });
  const toggleVisibility = () => {
    setPosition(!position);
  };

  return (
    <div>
      <Box pose={position ? 'left' : 'right'} className="box" />
      <button onClick={toggleVisibility}>Toggle visibility</button>
    </div>
  );
};

export default Pop;

一切正常，但这段代码就像我设置的那样 transition: 0s

你能帮帮我吗？

Answer 1

这里是解决方案您需要将 const Box 放在反应之外 class，以防止重新渲染。

import React, { useState } from 'react';
import posed from 'react-pose';

const Box = posed.div({
    left: { x: 0 },
    right: { x: 100 }
  });

const Pop = () => {
  const [position, setPosition] = useState(false);
  const toggleVisibility = () => {
    setPosition(!position);
  };

  return (
    <div>
      <Box pose={position ? 'left' : 'right'} className="box" />
      <button onClick={toggleVisibility}>Toggle visibility</button>
    </div>
  );
};

export default Pop;

简单的反应姿势不透明度过渡不起作用

simple react-pose opacity transition dont work

javascript

animation

reactjs

react-hooks

react-pose