带有React高级组件的Anime.js动画

Question

我有一个功能组件，它呈现网格元素。我想通过将Anime.js动画封装到这个组件中。问题是‘如何以正确的方式实现它，以及如何从WrappedComponent中选择所需的目标元素?’。

import React, { PureComponent } from 'react';
import anime from 'animejs/lib/anime.es.js';

function withAnimation(WrappedComponent) {

    return class extends PureComponent {

        handleAnimation = () => {
            anime({
                targets: 'targets are in WrappedComponent',
                translateY: [-30, 0],
                easing: 'easeInOutQuad',
                duration: 2000,
            })
        }

        componentWillMount(){
            this.handleAnimation()
        }

        render() {
            return <WrappedComponent {...this.props}/>;
        }
    };
}


export default withAnimation;

Answer 1

在父组件中创建一个参考，并将其传递给包装好的组件，并将其用作targets：

import React, { PureComponent } from "react";
import anime from "animejs/lib/anime.es.js";

function withAnimation(WrappedComponent) {
  return class extends PureComponent {
    constructor() {
      super();

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

    handleAnimation = () => {
      anime({
        targets: this.target1,
        translateY: [-30, 0],
        easing: "easeInOutQuad",
        duration: 2000
      });
    };

    componentWillMount() {
      this.handleAnimation();
    }

    setTarget = el => {
      this.target1 = el;
    };

    render() {
      return <WrappedComponent setTarget={this.setTarget} {...this.props} />;
    }
  };
}

const WrappedComponent = props => {
  return <div ref={el => props.setTarget(el)}>Animate me</div>;
};

export default withAnimation;