jeudi 25 mars 2021

Spring animation is not working in ReactJS

sorry if this is a stupid and easy to answer question but I'm not able to find a correct answer which would solve this problem. I have a Component class written like this:

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=
                    to=
                >
                    {
                        (props) => (
                            <div style={props}>
                                hover<!--this renders fine-->
                                <div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                                    <span><a href='#' style= >dWare.sk</a></span>
                                    <a href='#' style=>dWare.sk</a>
                                </div>
                            </div>
                        )
                    }
                </Spring>
            )
        } else {
            return (
                <div className='upperDivLogoText' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    <span><a href='#' style= >dWare.sk</a></span>
                    <a href='#' style=>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>
        )
    }
}

But if I hover over upperDivLogoText it just doesn't do anything. Any suggestions on how to fix this ? Thanks in advance for your response.




Aucun commentaire:

Enregistrer un commentaire