javascript - react-pose 动画在安装时闪烁

Question

我有以下代码，它应该Container在 3 秒后为组件呈现一个简单的淡入淡出动画。但是，该组件在淡入之前闪烁完全可见。我的问题是：为什么会发生这种情况，我该如何阻止它发生？

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

const sequence = b =>
  b.every(
    (a, i) => !(a.call ? a() : setTimeout(() => sequence(b.slice(++i)), a))
  );

const usePose = (initial, poses = {}) => {
  const [pose, setPose] = useState(initial);
  return { pose, setPose, poses };
};

const useAnimation = () => {
  const { pose, setPose } = usePose(`hidden`, [`hidden`, `normal`]);

  useEffect(() => {
    sequence([3000, () => setPose(`normal`)]);
  }, []);

  return {
    pose
  };
};

const Container = styled(
  posed.div({
    hidden: {
      opacity: 0
    },
    normal: { opacity: 1 }
  })
)({
  color: "red"
});

const App = () => {
  const { pose } = useAnimation();

  return (
    <PoseGroup animateOnMount>
      <Container key={0} pose={pose}>
        <h1>hello world</h1>
      </Container>
    </PoseGroup>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Answer 1

问题解决：

const Container = styled(
  posed.div({
    hidden: {
      opacity: 0
    },
    normal: { opacity: 1 }
  })
)({
  color: "red"
  opacity: 0, // Add this to stop flash. 
});