Spring 动画在 ReactJS 中不工作

Question

下面的 Spring 动画在 ReactJS 中不工作。

我有一个组件 class 是这样写的：

import React from "react";
import { Component } from 'react'
import { Spring } from 'react-spring'

export default class Menu extends Component {
    constructor(props) {
        super(props);

        this.state = { isMouseOver: false };
        this.handleMouseEnter = this.handleMouseEnter.bind(this);
        this.handleMouseLeave = this.handleMouseLeave.bind(this);
    }

    handleMouseEnter(e) {
        this.setState({ isMouseOver: true });
    }

    handleMouseLeave() {
        this.setState({ isMouseOver: false });
    }

    LogoText(props) {
        const isMouseOver = props.isMouseOver;
        const handleMouseEnter = props.handleMouseEnter;
        const handleMouseLeave = props.handleMouseLeave;

        if (isMouseOver) {
            return (
                <Spring
                    from={{ opacity: 0 }}
                    to={{ opacity: 1 }}
                >
                    {
                        (props) => (
                            <div style={props}>
                                hover<!--this renders fine-->
                                <div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                                    <span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
                                    <a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
                                </div>
                            </div>
                        )
                    }
                </Spring>
            )
        } else {
            return (
                <div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    <span><a href='#' style={{ color: '#d8f3dc' }} >dWare.sk</a></span>
                    <a href='#' style={{ color: '#95d5b2' }}>dWare.sk</a>
                </div>
            )
        }
    }

    render() {
        return (
            <div className='upperDiv'>
                <this.LogoText
                    isMouseOver={this.state.isMouseOver}
                    handleMouseEnter={this.handleMouseEnter}
                    handleMouseLeave={this.handleMouseLeave}
                />
                <div className='lowerDiv'>
                    <ul className='lowerDivMenu'>
                        <li><a href='#'>O MNE</a></li>
                        <li><a href='#'>MOJE PORTFÓLIO</a></li>
                        <li><a href='#'>KONTAKT</a></li>
                    </ul>
                </div>
            </div>
        )
    }
}

但是，如果我将鼠标悬停在 upperDivLogoText 上，它什么也做不了。关于如何解决这个问题有什么建议吗？

解决方案：这是因为 Spring 版本 9。对于遇到此类问题的任何人，只需卸载最新的 spring 并执行 npm i react-spring@8.0.20

Answer 1

可能是 onMouseLeave 在 onMouseEnter 之后的第一个 div 被触发，因为它被卸载了，因此导致它看起来好像什么都没发生？

你不想在第一个上使用 onMouseEnter 而在第二个上使用 onMouseLeave 而不是在每个上都使用 onMouseLeave 吗？

Answer 2

截至 2021 年 3 月，, react-spring V9 中提到的尚未发布，可能有重大更改。因此，使用 V8 是 安全的。

但是，在 V9 中，动画正在使用 useSpring 挂钩和 animated.div:

示例：

import { useSpring, animated } from 'react-spring' // Using hooks in V9

function LogoText({ isMouseOver, handleMouseEnter, handleMouseLeave }) {

  const style = useSpring({
    opacity: isMouseOver ? 1 : 0,
    from: { opacity: 0 },
  })

  if (!isMouseOver) {
    return (
      <div
        className="upperDivLogoText" onMouseEnter={handleMouseEnter}
      >
        <span>
          <a href="#" style={{ color: '#d8f3dc' }}>
            dWare.sk
          </a>
        </span>
        <a href="#" style={{ color: '#95d5b2' }}>
          dWare.sk
        </a>
      </div>
    )
  }

  return (
    <animated.div style={style}>
      <div
        className="upperDivLogoText" onMouseLeave={handleMouseLeave}
      >
        <span>
          <a href="#" style={{ color: '#d8f3dc' }}>
            dWare.sk
          </a>
        </span>
        <a href="#" style={{ color: '#95d5b2' }}>
          dWare.sk
        </a>
      </div>
    </animated.div>
  )
}

Spring 动画在 ReactJS 中不工作

Spring animation is not working in ReactJS

javascript

animation

reactjs

react-spring