在 React 中渲染和卸载组件时如何制作动画？

Question

我尝试在 React 中渲染和卸载组件时为组件设置动画，但未成功。

要动画的组件

我尝试过的一种方法是使用动画属性类创建一个状态（ fade ），在渲染时，该类是fadeIn，并且将卸载该类是fadeOut

const handlePokemonDetails = async () => {

    if (pokemonDetails === true){
        setFade(styles.fadeOut)
        await timeout(500)
    }

    else{
        setFade(styles.fadeIn)
    }

    setPokemonDetails(!pokemonDetails)

}

...

<div className={pokemonDetails ? styles.pokemonDetails + " " + fade : ""}></div>

萨斯代码：

    .pokemonDetails
       position: absolute
       top: 0
       z-index: 3
       display: flex
       width: 35vmin
       height: 39.5vmin
       flex-direction: column
       background-color: rgba(210, 210, 210, 0.85)
       border-radius: 10px

    @keyframes fade
       0%
         height: 0vmin
       100%
         height: 39.5vmin

    .fadeIn
       animation: fade 0.5s normal
    
    .fadeOut
       animation: fade 0.5s reverse

但是，当我将状态更改为其他类时，组件不会应用这种新的类动画样式。 有谁知道我该如何解决这个问题或其他方法？

Answer 1

好问题。 我刚刚完成了为 React 编写的钩子，这有助于查看https://github.com/perymimon/React-Anime-Manager

只需发布 ver2-alpha，这样文档仍然是湖。

import {useAnimeManager,ADDED,REMOVED} from "@perymimon/react-anime-manager"

 const phase2class = {
    [ADDED]: "fadeIn",
    [REMOVED]: "fadeOut",
}

function Pokemons({pokemones}){
    const pokemonesStates = useAnimeManager(pokemones);

    return (
        <pokemones>
            { pokemonesStates.map(state =>(
                <div className={phase2class[state.phase] } onAnimationEnd={state.done}/>
              )
            )}
        </pokemones>
    )
}

Answer 2

这是react-transition-group的确切用例。

将你的组件包裹在<CSSTransition>

function App() {
  const [inProp, setInProp] = useState(false);
  return (
    <div>
      <CSSTransition in={inProp} timeout={200} classNames="my-node">
        <div>
          {"I'll receive my-node-* classes"}
        </div>
      </CSSTransition>
      <button type="button" onClick={() => setInProp(true)}>
        Click to Enter
      </button>
    </div>
  );
}

然后将 CSS 添加到您的类中。 如果您将CSSTransition的 className 设置为my-node ，您将有 4 个要设置样式的类：

.my-node-enter {
  opacity: 0;
}
.my-node-enter-active {
  opacity: 1;
  transition: opacity 200ms;
}
.my-node-exit {
  opacity: 1;
}
.my-node-exit-active {
  opacity: 0;
  transition: opacity 200ms;
}