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 transform属性。

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

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