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

Question

我有一个渲染网格元素的功能组件。我想通过用 HOC 包装它来为该组件提供 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

在父组件中创建一个ref，并将其传递给被包装的组件，并将其用作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;