Анимированная шкала реагирует

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

но компонент продолжает исчезать или не отображаться должным образом по ряду причин. Как правильно настроить анимацию этого компонента?

Answer 1

Вы не хотите использовать 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>
        );
    }