使用没有 react-transition-group 和 ref 的 gsap 反应动画答案

【问题标题】：react animation with gsap without react-transition-group and ref使用没有 react-transition-group 和 ref 的 gsap 反应动画
【发布时间】：2018-07-20 02:44:56
【问题描述】：

我对 GSAP 有疑问并做出反应，正如我从一些教程中读到的那样，它们都使用 react-transition-group 并且其中许多使用 ref 作为 GSAP 的替代选择器，但是，如果我在我的情况下使用 ref ，整个页面都会被动画化，我只想要一个元素来动画化，所以我使用了 id 选择器，它就像这样工作得很好

import React from 'react';
import { TweenMax } from 'gsap';
import uuid from 'uuid';
import '../styles/homePage.css';

class HomePage extends React.Component{

    startAnimation=(pic)=>{
        TweenMax.from(`#${pic.id}`, 1, {
            opacity: 0,
            x: -100,
            y: -100
        });
    }

    render(){
        const PicsNum = 15;
        let pics = [];
        let pic = {};
        for (let i = 5; i <= PicsNum; i++) {
            const picPath = `/pictures/testingPics/${i}.jpg`
            pic={id:`a${uuid()}`, picPath}
            pics.push(pic)
        }
        const renderPics = pics.map((p, i) => (
            <div
                key={i}
                className='img-container'
            >
                <img src={p.picPath} className='pic' id={p.id}/>
                <button onClick={()=>{this.startAnimation(p)}}>click</button>
            </div>
        ))
        return (
            <div className='pics'>
                {renderPics}
            </div>
        )
    }
}

export default HomePage;

有人能告诉我为什么要使用 react-transition-group 吗？如果我想像现在这样在没有它的情况下使用动画会出现什么问题？非常感谢

【问题讨论】：

标签： reactjs animation css-transitions ref gsap

【解决方案1】：

所以，你在这里所做的对于简单的动画来说绝对没问题。只有当您的逻辑和动画开始变得更加复杂时，您才会发现它有缺点。

随着逻辑/动画复杂性的增加，您可能遇到的主要问题是您现在实际上使用两个不同的库来定位 dom。 React 希望完全控制 dom，以便它可以做它的事情。然而，GSAP 现在也在寻找 dom 中的元素并控制它的状态，而 react 不知道，所以现在事情可能会不同步。当用户已经触发淡出时，React 可能会重新渲染该组件，将不透明度重置为 1。

React-transition-group 可以成为一个有用的工具来简化动画组件的进出工作，但它不是唯一的方法，也不是反应动画的全部和结束，所以不要觉得您必须使用它。只是也许研究一下简化代码的方式，您必须为您想要动画输入或输出的每个组件编写代码。（它为您提供进出动画的特定生活方式，以及删除组件后动画的回调，这是组件转换的大部分样板文件）。

在我提到的第一个问题的情况下，Transition-group 在这里很有用，因为你所有的动画代码都包含在它提供的帮助器中，所以 react 知道：1）你的动画......在你之前不要做任何事情'已经完成了... 2) 现在你已经完成了，我又回到了掌控之中。

但是还有过渡组之外的其他选项来处理这种 dom 控制的二分法：

您可以尝试变得超级聪明并声明性...使用 refs 访问元素并将它们传递给由 state/props 触发和控制的 gsap 动画。

但是有一些出色的库可以让您不必担心状态和动画以及诸如https://github.com/azazdeaz/react-gsap-enhancer之类的所有麻烦

这是一个很棒的高阶组件，它只是确保 gsap 对元素所做的任何更改都被注意到并在 react 重新渲染和状态更改时得到保留。

老实说，这有点神奇，并且让使用 react 和 GSAP 成为一种绝对的乐趣。

还要回答您关于“为什么引用”而不是有用的“只需将 ID 字符串传递给 gsap 函数”的问题：

这里没有对错。 react 中的 ref 将在内存中存储指向该 Dom 元素的指针。使它成为一个方便的查找。它的主要优点是对该元素的引用不会在重新渲染时过期。如果您使用 GetElementById 手动选择一个元素，并且该 Dom 节点被react re-render 替换，那么您的变量引用将变得未定义，您将不得不再次调用 GetElementById。 GetElementById 在性能方面非常便宜，它与性能无关，只是避免在每次重新渲染后必须“找到”对 Dom 元素的新引用的样板。

【讨论】：