Question

我正在尝试对我的反应组件的比例进行动画处理。似乎很简单，而这基本上是React-Motion examples之外的：

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

，但是由于多种原因，该组件不断消失或无法正确显示。如何获得该组件的比例以正确设置动画？

Answer 1

您不想使用value.scale，而只是使用value。同样，为了提高可读性，您可以使用刻度代替值作为参数。查看本文以获得简单的example

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

动画比例反应

1 个答案: