Firefox не анимируется при изменении атрибутов компонента <g> - PullRequest
Новая
       20

Firefox не анимируется при изменении атрибутов компонента <g>

0 голосов
/ 09 января 2020

Я создаю несколько анимированных компонентов React в SVG. Когда я запускаю в Chrome, анимация работает , но когда я запускаю ее в Firefox, она не работает.

Вот пример: 

const [x, setX] = useState(0)

useEffect(() => {
  setTimeout(() => {
    setX(100)
  }, 3000)
}, [])

return (
  <svg width={500} height={300}>
    <g transform={`translate(${x}, ${0})`} style={{ transition: "3s all" }}>
      <rect width={50} height={50} x={0} y={0} fill={'#f00'} />
    </g>
  </svg>
)

Вы можете видеть, что он работает в Chrome, но не в Firefox: https://codesandbox.io/s/gracious-ives-ykmfp

Если я удаляю преобразование в g и изменить direct в x prop of rect , этот способ будет работать в Firefox, но я не хочу делать это таким образом.

Любая помощь?

Ответы [ 2 ]

0 голосов
/ 09 января 2020

Атрибут transform не совпадает со свойством transform CSS, даже если он может сбивать с толку (и, очевидно, два будут объединены ).

Вместо использования атрибута переместите преобразование в свойство стиля: 

const [x, setX] = useState(0);

useEffect(() => {
  setTimeout(() => {
    setX(100);
  }, 3000);
}, []);

return (
  <svg width={500} height={300}>
    <g style={{ transform: `translate(${x}px, 0px)`, transition: 'all 3s' }}>
      <rect width={50} height={50} x={0} y={0} fill={'#f00'} />
    </g>
  </svg>
);

Демо: https://codesandbox.io/s/nifty-snowflake-664rk

0 голосов
/ 09 января 2020

Попробуйте переместить свойство transform в стиль. У меня так работает в FF .:

<g style={{transform: `translateX(${x}px)`, transition: "3s all" }}>
  <rect width={50} height={50} x={0} y={0} fill={"#f00"} />
</g>

https://codesandbox.io/s/musing-cdn-7eqg0

...