【问题标题】:react-spring: fade in top-left to bottom-rightreact-spring:从左上角淡入到右下角
【发布时间】:2020-06-09 04:35:57
【问题描述】:

我目前正在将我们的动画移至 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

【问题讨论】:

    标签: javascript css reactjs react-spring


    【解决方案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

    【讨论】:

    • 这确实有效,但这意味着 div 正在移动。我不希望它移动我希望它从左上角到左下角淡入,但保持原位,几乎就像渐变淡入一样。如果我没有正确解释自己,请告诉我。
    • 你能举个例子吗?我总是使用运动,其他人都使用它。我不知道这种渐变像淡入淡出......
    • 将对象从一侧淡入到另一侧。所以左侧开始淡入,淡入在元素上移动,所以右侧开始淡入,而左侧已经完成。我想实现这一点,但从一个角落到另一个角落
    猜你喜欢
    • 2019-03-06
    • 2021-08-21
    • 2013-12-22
    • 1970-01-01
    • 2021-12-01
    • 1970-01-01
    • 2018-12-29
    • 1970-01-01
    • 2020-05-01
    相关资源
    最近更新 更多