javascript - 动画比例反应

Question

我正在尝试为我的反应组件的规模设置动画。它看起来相当简单，这基本上是在React-Motion示例中正确的：

var component = () => {
let style = { scale: spring(1.1, presets.wobbly)};
    return (
      <Motion style={style}>
              {value =>
                <div
                  style={{
                    backgroundColor: 'purple',
                    height: '50%', width: '50%', 
                    transform: `scale(${value.scale})`,
                    WebkitTransform: `scale(${value.scale})`,
                  }}>

                </div>
              }
      </Motion>
    );
}

但由于各种原因，该组件不断消失或无法正常显示。如何让这个组件的比例正确地设置动画？

标签： javascriptreactjsanimationreact-motion

Answer 1

您不想使用 value.scale，而只想使用 value。此外，为了提高可读性，您可以使用 scale 而不是 value 作为参数。查看这篇文章以获得一个简单的例子

var component = () => {
let defaultStyle = {scale: 0};
let style = { scale: spring(1.1, presets.wobbly)};
        return (
          <Motion defaultStyle={defaultStyle} style={style}>
                  {({scale}) =>
                    <div
                      style={{
                        backgroundColor: 'purple',
                        height: '50px', width: '50px', 
                        transform: `scale(${scale})`,
                        WebkitTransform: `scale(${scale})`,
                      }}>
                    </div>
                  }
          </Motion>
        );
    }