plus1tv / react-anime

✨ (ノ´ヮ´)ノ*:・゚✧ A super easy animation library for React!
https://codepen.io/collection/nrkjgo/
MIT License
1.55k stars 81 forks source link

Animation is run on every rerender #73

Closed jantimon closed 3 years ago

jantimon commented 4 years ago

Clicking on a button will show the animation again although there was no markup change:

ReactAnime

import React, { useState } from "react";
import Anime from "react-anime";

export default function App() {
  const list = [0, 1, 2, 3, 4, 5];
  const [, set] = useState();
  return (
    <Anime scale={[0, 1]}>
      {list.map(i => (
        <button key={i} onClick={() => set(i)}>
          {i}
        </button>
      ))}
    </Anime>
  );
}

Codesandbox: https://codesandbox.io/s/react-anime-rerender-ttfbu

abused commented 4 years ago

I Am also having this issue, whenever rerendering occurs (in my case selecting an item), the animation is rerun. 4luuSG5 - Imgur

Kyliathy commented 4 years ago

Same here. Using functional components & useState.

I really liked the simplicity of defining animations. Anyway, until a solution is found, I switched to react-spring.

andreasonny83 commented 4 years ago

Same here

clearink commented 4 years ago

单击按钮将再次显示动画,尽管标记没有更改:

ReactAnime

 从“ react” 导入React , {  useState  }  ; 进口动漫从“反应-动漫” ; 

出口 默认 函数 应用() { 
  const的 列表 =  [ 0 , 1 , 2 , 3 , 4 , 5 ] ; 
  const  [ , set ]  =  useState (); 
  返回 (
    < 动画 规模= { [ 0 , 1 ] } > 
      { 列表。映射(我 =>  (
        <按钮 键= { i }  onClick = { () =>  设置(i )} > 
          { i } 
        < / button > 
      ))} 
    < / 动漫> 
  ); 
}

Codesandbox:https://codesandbox.io/s/react-anime-rerender-ttfbu

I think it's because the component's props have changed,Although they are both [0,1]

Nantris commented 4 years ago

I haven't found any way around this, or any circumstance that I can React-Anime due to this issue. It's a really elegant solution to integrating AnimeJS with React and I'd really like to use it. I'm not seeing how to work around this issue though. I even forked the library and spent the past few hours trying to remedy this.

@alaingalvan can you explain why this is, or what the correct implementation with React-Anime is?

BryanAM commented 4 years ago

I second this, reach pushing functional components makes animations really hard when every update of the state triggers all animations over.

HotPotatoC commented 4 years ago

I also have the same problem.

@alaingalvan just wondering will there be a fix to this issue?