react-姿势动画在挂载时闪烁

Question

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

​

​

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