анимация реактивной позы мигает на горе

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