БЛОГ НА HUSL


Как добавить JS скрипт в React

Автор вопроса: Ruslan Makhmatov

Хочу добавить JS скрипт, который будет менять анимации при наведении на кнопку, но не знаю как правильно это сделать, index.html файла нет. React 18.2

// Сам JS Код
let contactMeBtn = document.getElementById("contact-me-btn");
let handPicture = document.getElementById("neuro-hand-pic");

contactMeBtn.addEventListener("mouseover", () => {
  handPicture.classList.remove("neuro-hand-in");
  handPicture.className = "neuro-hand-out";
  console.log("malda");
});

contactMeBtn.addEventListener("mouseleave", () => {
  handPicture.classList.remove("neuro-hand-out");
  handPicture.className = "neuro-hand-in";
  console.log("malda2");
});
$text: #ffffff
$mainBlue: #00cffd
$btnHover: #008bfd
$blueForText: #24CFFF
$userHover: #7ce0ff

.ThirdAppBody
    background-image: url(/src/images/BG-NET.png)
    background-size: cover
    background-position: center center
    width: 100%
    height: 200vh

.third-screen
    width: 71.40625%
    height: 200vh
    margin: auto
    display: flex
    flex-direction: column
    align-items: center

.about-c-header
    font-family: 'Roboto Condensed'
    font-style: normal
    font-weight: 500
    user-select: none
    font-size: clamp(30px,2.6041666666666665vw,70px)
    color: $text
    margin-top: clamp(50px,5.208333333333333vw,300px)
    text-transform: uppercase

.separator-cr
    width: clamp(314px,26.770833333333332vw,614px)
    height: 2px
    background-color: $text
    margin-top: clamp(22px,1.7708333333333333vw,44px)

.about-c-glass
    width: clamp(354px,39.270833333333336vw, 854px)
    height: clamp(154px ,25.3125vw, 586px)
    background: rgba(217, 217, 217, 0.06)
    box-shadow: 0px 12px 65px rgba(0, 0, 0, 0.25), inset 8.57333px -8.57333px 8.57333px rgba(182, 182, 182, 0.32), inset -8.57333px 8.57333px 8.57333px rgba(255, 255, 255, 0.32)
    backdrop-filter: blur(37.7227px)
    margin-top: clamp(14px,1.7708333333333333vw, 54px)
    display: flex
    flex-direction: column
    align-items: center

.about-c-p
    font-family: 'Roboto Condensed'
    font-style: normal
    font-weight: 400
    width: 80.90185676392574%
    font-size: clamp(35px,2.34375vw, 55px)
    line-height: 53px
    text-align: center
    text-transform: capitalize
    margin-top: clamp(20px,1.5625vw, 50px)
    color: #FFFFFF

.ruslan
    color: $blueForText
    text-decoration: underline
    transition: 0.3s all
    &:hover
        color: $btnHover

.social-networks
    width: 47.48010610079576%
    height: 13.580246913580247%
    display: flex
    justify-content: space-between
    margin-top: clamp(15px,1.8229166666666667vw,50px)

.separator-cr-2
    width: clamp(212px,21.458333333333332vw, 512px)
    height: 2px
    background-color: $text
    margin-top: clamp(30px,2.0833333333333335vw, 50px)

.contact-me-btn
    width: 53.315649867374006%
    height: 15.020576131687243%
    margin-top: clamp(30px,2.0833333333333335vw, 50px)
    font-family: 'Roboto Condensed'
    font-style: normal
    font-weight: 400
    font-size: clamp(25px,2.34375vw,65px)
    text-align: center
    text-transform: uppercase
    border: 2px solid $text
    color: $text
    background-color: transparent
    transition: 0.3s all
    &:hover
        border: none
        background-color: $mainBlue
        box-shadow: 0px 4px 31px 5px rgba(0, 207, 253, 0.9)

.icon-sn-1 , .icon-sn-2, .icon-sn-3
    font-size: clamp(33px,3.0375vw,77px)
    cursor: pointer
    color: $text
    transition: 0.3s all

.icon-sn-1:hover
    color: #C4F4FF

.icon-sn-2:hover
    color: #5865F2

.icon-sn-3:hover
    color: #1769ff

.neuro-hand-in
    position: absolute
    width: 1120.31px
    height: 1300px
    left: 778.56px
    user-select: none
    pointer-events: none
    top: 2431px
    -webkit-animation-name: slideInRight
    animation-name: slideInRight
    -webkit-animation-duration: 1s
    animation-duration: 1s
    -webkit-animation-fill-mode: both
    animation-fill-mode: both

.neuro-hand-out
    position: absolute
    width: 1120.31px
    height: 1300px
    left: 778.56px
    user-select: none
    pointer-events: none
    top: 2431px
    -webkit-animation-name: slideOutRight
    animation-name: slideOutRight
    -webkit-animation-duration: 1s
    animation-duration: 1s
    -webkit-animation-fill-mode: both
    animation-fill-mode: both

@-webkit-keyframes slideInRight
  0% 
    -webkit-transform: translateX(100%)
    transform: translateX(100%)
    visibility: visible

  100% 
    -webkit-transform: translateX(0)
    transform: translateX(0)

@keyframes slideInRight
    0%
        -webkit-transform: translateX(100%)
        transform: translateX(100%)
        visibility: visible

    100%
        -webkit-transform: translateX(0)
        transform: translateX(0)

// Slide out right

@-webkit-keyframes slideOutRight
  0% 
    -webkit-transform: translateX(0)
    transform: translateX(0)

  100% 
    visibility: hidden
    -webkit-transform: translateX(100%)
    transform: translateX(100%)

@keyframes slideOutRight
    0%
        -webkit-transform: translateX(0)
        transform: translateX(0)

    100%
        visibility: hidden
        -webkit-transform: translateX(100%)
        transform: translateX(100%)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

// Код компонента в React

import React from "react";
import "../styles/aboutC_styles/aboutC.css";
import { FaGithub } from "react-icons/fa";
import { FaBehance } from "react-icons/fa";
import { FaDiscord } from "react-icons/fa";
import NeuroHand3 from "../images/NEURO-HAND3.png";

const AboutCreator = () => {
  return (
    <div className="third-screen">
      <h2 className="about-c-header">ABOUT CREATOR</h2>
      <figure className="separator-cr"></figure>
      <div className="about-c-glass">
        <p className="about-c-p">
          This project was fully created by{" "}
          <span className="ruslan">ruslan makhmatov</span> - software developer
          from kazakhstan
        </p>
        <div className="social-networks">
          <FaGithub className="icon-sn-1"></FaGithub>
          <FaDiscord className="icon-sn-2"></FaDiscord>
          <FaBehance className="icon-sn-3"></FaBehance>
        </div>
        <figure className="separator-cr-2"></figure>
        <button id="contact-me-btn" className="contact-me-btn">
          CONTACT ME
        </button>
      </div>
      <img id="neuro-hand-pic" className="neuro-hand-in" src={NeuroHand3}></img>
    </div>
  );
};
export default AboutCreator;


Источник

Ответы (1 шт):

Автор решения: Nannik

Как написал @NNL993 вы можете просто импортировать файл

import "/path/to/folder/animation.js";

Но если импорт файла не обязательный, вы можете воспользоваться возможностями React

const AboutCreator = () => {
    const [neuroHandClass, setNeuroHandClass] = useState("neuro-hand-in"); // Записываем класс картинки в стейт

    return (
        <div>
            ...
            <button
                onMouseEnter={() => {setNeuroHandClass("neuro-hand-in")}} // Обработчик входа
                onMouseLeave={() => {setNeuroHandClass("neuro-hand-out")}} // Обработчик выхода
                id="contact-me-btn"
                className="contact-me-btn"
            >
                CONTACT ME
            </button>
            <img 
                id="neuro-hand-pic" 
                className={neuroHandClass} // Берем класс из стейта
                src={NeuroHand3} />
        </div>
    );
};
→ Ссылка

licensed under cc by-sa 3.0 with attribution.