Изменение цвета фона анимации React-Move - PullRequest
Новая
       60

Изменение цвета фона анимации React-Move

0 голосов
/ 07 апреля 2020

, если вы хотите изменить цвет в реакции с перемещением: 

import React from "react";
import ReactDOM from "react-dom";

import { interpolate, interpolateTransformSvg } from "d3-interpolate";
import Animate from "react-move/Animate";

function Stripes(props) {

  return (
    <Animate
      start={{

        backgroundColor: "red"
      }}

      enter={{
        backgroundColor:["blue"]
      }}
      interpolation={(begValue, endValue, attr) => {
        if (attr === "transform") {
          return interpolateTransformSvg(begValue, endValue);
        }

        return interpolate(begValue, endValue);
      }}
    >
      {({ backgroundColor }) => <div style={{ backgroundColor }}>adasd</div>}
    </Animate>
  );
}

ReactDOM.render(<Stripes />, document.getElementById("root"));

без интерполяции пропуски вы получите эту ошибку

> Предупреждение: NaN - недопустимое значение для свойства стиля backgroundColor css.

проблема в изменении цвета, для этого необходимо использовать другую библиотеку с именем d3-interpolate делает цвет между начальным и конечным цветами . эта функция поддерживает интерполяцию реквизит

...