Splitting.js 和 Anime.js 等动画库不适用于 React JS答案

【问题标题】：Animation libraries like Splitting.js and anime.js not working on React JSSplitting.js 和 Anime.js 等动画库不适用于 React JS
【发布时间】：2020-07-28 12:53:18
【问题描述】：

好的，我已经尝试了 2 个动画库，第一个，splitting.js 和第二个 anime.js，它们在 vanilla js 上都可以正常工作，但在 react js 上却失败了，有什么想法吗？错误没有意义。请尝试两个包的基本 npm 安装，并尝试在 react js 项目中使用它们，它们都不起作用。有什么理由吗？以及如何在 react js 中实际使用这些库？我猜测这与 React 的 ReactDOM 更改 DOM 元素有关，因此甚至在动画库找到它们之前就删除了所需的元素。

重现我的场景： 请尝试运行一个简单的 react js 项目，并尝试将这两个动画库一个一个添加

【问题讨论】：

标签： javascript reactjs animation anime.js

【解决方案1】：

许多 DOM 操作库不能开箱即用，因为 react 有自己的处理方式。您可以通过在效果挂钩中执行这些库代码来玩弄，而不是在组件声明本身中。

我的想法是使用react-spring，它是从头开始构建的，并考虑到了 React。另一方面，react-anime 只是anime.js 的一个包装器，它将它塑造成react 的生命周期。

【讨论】：

赏金用于引入更好的解决方案，以最少的样板代码完成两个动画库的工作
欣赏@AKC

【解决方案2】：

要在您的 react 应用中使用anime.js，您可能需要查看https://www.npmjs.com/package/react-anime

【讨论】：

赞成好的答案，不知何故我错过了这个，关于如何使用 split.js 的任何想法？
我找不到可以做到这一点的包，而且我个人之前没有使用过。

【解决方案3】：

在 React 组件上使用anime.js 时，您需要确保以 DOM 元素而不是 Virtual DOM 元素为目标。这是一个例子。它有点旧，但是 afaik 没有一个代码/逻辑被弃用，并且可以使用 useEffect 挂钩轻松转换为功能组件。

import React from 'react';
import ReactDOM from 'react-dom';
import { TransitionGroup, Transition } from 'react-transition-group';
import anime from 'animejs';

import './style.scss';

class ListItem extends React.Component {
    constructor() {
        super();

        // create li DOM reference
        this.liRef = React.createRef();
    }

    componentDidUpdate(){
        this.animeRef = anime({
            targets: this.liRef.current,
            translateX: () => {
                if( this.props.status == 'entering' ) {
                    return ['-100%', '0%'];
                } else if( this.props.status == 'exiting' ) {
                    return ['0%', '100%'];
                }
            },
            elasticity: () => {
                if( this.props.status == 'entering' ) {
                    return 300;
                } else if( this.props.status == 'exiting' ) {
                    return 0;
                }
            },
            duration: 500
        });
    }

    render() {
        return (
            <li className="list-item" ref={ this.liRef }>
                Hey, I am item number <b>{ this.props.num }</b>
            </li>
        );
    }
}

class App extends React.Component {
    constructor() {
        super();

        this.state = {
            data: [1,2,3]
        };
    }

    add() {
        this.setState({
            ...this.state,
            data: this.state.data.concat([ this.state.data.length + 1 ])
        });
    }

    remove() {
        this.setState({
            ...this.state,
            data: this.state.data.slice(0, -1)
        });
    }

    render() {
        return (
            <div className="app-container">
                <div className="buttons">
                    <button onClick={ this.add.bind(this) }>Add one</button>
                    <button onClick={ this.remove.bind(this) }>Remove one</button>
                </div>

                <TransitionGroup 
                component="ul"
                className="list"
                >
                    {
                        this.state.data.map( num => (
                            <Transition 
                            key={ num }
                            timeout={ 500 }
                            mountOnEnter
                            unmountOnExit
                            >
                                {
                                    ( status ) => {
                                        return <ListItem status={ status } num={ num }/>;
                                    }
                                }
                            </Transition>
                        ) )
                    }
                </TransitionGroup>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

该示例来自this 文章，如果您想了解有关此事的更多信息。

这里是style.scss，如果你只是想在一个密码箱里拍打

【讨论】：