反应姿势动画在安装时闪烁

Question

I have the following code, which should render a simple fade in animation for the Container component after 3 seconds. However, the component is flashing fully visible before fading in. My question is: why is this happening, and how can I stop it from happening?

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

Issue solved by:

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