Splitting.js 和 Anime.js 等动画库无法在 React JS 上运行

Question

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

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

Answer 1

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

我的看法是使用

react-spring

，它是从头开始构建的，考虑到了 React。另一方面，react-anime 只是 Anime.js 的包装，它将其塑造成 React 的生命周期。

Answer 2

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

Answer 3

在 React 组件上使用 Anime.js 时，您需要确保定位 DOM 元素而不是虚拟 DOM 元素。这是一个例子。它有点旧，但据我所知，没有任何代码/逻辑被弃用，并且可以使用

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 如果你只是想加入codesandbox