react-spring：从左上角淡入到右下角

Question

我目前正在将我们的动画移至 react-spring，但在实现动画时遇到困难，例如从左上角到右下角的淡入。一些简单的东西会在 div 中淡入淡出，但我需要控制淡入的方向：

import {useTransition, animated} from 'react-spring'

const component = () => {

  const props = useSpring({opacity: 1, from: {opacity: 0}})

  return (
    <animated.div>
      {div contents here}
    </animated.div>
  )
}

Anyone have experience with React Spring

Answer 1

要控制方向，您可以使用 css 变换属性。

  const props = useSpring({
    opacity: 1,
    transform: "translate(0px, 0px)",
    from: { opacity: 0, transform: "translate(-20px, -20px)" }
  });

https://codesandbox.io/s/optimistic-fermi-yclcn