Как сделать, чтобы переход CSS не влиял на мой JavaScript

У меня есть круг, который следует за курсором, и я также заставил его расширяться, когда навожу курсор на любой текст. Проблема в том, что я пытаюсь добавить transition: 2s; в CSS, чтобы он плавно расширялся. Когда я добавляю его, это разрушает мою анимацию JavaScript, поэтому мне было интересно, могу ли я добавить только время перехода к моменту расширения круга.

Я также устал добавлять transition: 2s; только к классу .mouseFollowCircle.big, но это вызывает те же проблемы в JavaScript, только когда я навожу курсор на текст.

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    requestAnimationFrame(() => {
      move();
    });
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    if (e.target.tagName === 'P' ||
      e.target.tagName === 'A' ||
      e.target.tagName === 'BUTTON' ||
      e.target.parentNode.tagName === 'BUTTON') {
      interBubble.classList.add('big');
    } else {
      interBubble.classList.remove('big');
    }
  });

  move();
});

Body {
  background-color: black;
  overflow: hidden;
}

div {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  color: white;
  font-size: 30px;
}

.mouseFollowCircle {
  width: 50px;
  height: 50px;
  border: 3px solid white;
  border-radius: 999px;
  position: absolute;
  z-index: 999;
  top: -25px;
  left: -25px;
  box-shadow: 0 0 10px white;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: 1px solid white;
  position: absolute;
  z-index: 999;
  top: -35px;
  left: -35px;
  box-shadow: 0 0 10px white;
  pointer-events: none;
  backdrop-filter: blur(2px);
}

<div><p>Hello</p></div>
<section class = "mouseFollowCircle" id = "circle"></section>

transition: 2s применяет 2-секундный переход ко всем свойствам, которые подвергаются изменениям, включая translate. Попробуйте transition: 2s, translate 0s, чтобы явно указать нулевую продолжительность перехода для свойства translate.

— 28.03.2024 11:23

javascript css css-animations css-transitions

28.03.2024 11:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы сделать эффект расширения плавным для круга, следующего за курсором мыши, просто настройте эти свойства в классе .mouseFollowCircle:

transition: width 1s ease, height 1s ease, border 1s ease, top 1s ease, left 1s ease;

document.addEventListener('DOMContentLoaded', () => {
  const interBubble = document.getElementById('circle');
  let curX = 0;
  let curY = 0;
  let tgX = 0;
  let tgY = 0;

  function move() {
    curX += (tgX - curX) / 10;
    curY += (tgY - curY) / 10;
    interBubble.style.transform = `translate(${Math.round(curX)}px, ${Math.round(curY)}px)`;
    requestAnimationFrame(() => {
      move();
    });
  }

  window.addEventListener('mousemove', (e) => {
    tgX = e.clientX;
    tgY = e.clientY;

    if (e.target.tagName === 'P' ||
      e.target.tagName === 'A' ||
      e.target.tagName === 'BUTTON' ||
      e.target.parentNode.tagName === 'BUTTON') {
      interBubble.classList.add('big');
    } else {
      interBubble.classList.remove('big');
    }
  });

  move();
});

Body {
  background-color: black;
  overflow: hidden;
}

div {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  color: white;
  font-size: 30px;
}

.mouseFollowCircle {
  width: 50px;
  height: 50px;
  border: 3px solid white;
  border-radius: 999px;
  position: absolute;
  z-index: 999;
  top: -25px;
  left: -25px;
  box-shadow: 0 0 10px white;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: width 1s ease, height 1s ease, border 1s ease, top 1s ease, left 1s ease;
}

.mouseFollowCircle.big {
  width: 70px;
  height: 70px;
  border-width: 1px;
  top: -35px;
  left: -35px;
}

<div><p>Hello</p></div>
<section class = "mouseFollowCircle" id = "circle"></section>

28.03.2024 12:12

Другие вопросы по теме

Не могу выбрать целевой элемент

Как переместить кнопку расширения в bslib::card(), где full_screen = TRUE, в правый верхний угол?

Как заполнить пустое пространство в CSS Grid?

Не могу развернуть сервер разработки django-tailwind

Как мне заставить эту бесконечную карусель работать?

Подключение CSS в проекте Django

Как разместить поповер в CSS

Центрируйте текст вертикально вдоль плавающего пути многоугольных элементов «формы снаружи»

Расширяем <img>, но не слишком сильно

Как перенаправить домой на дом

Как сделать, чтобы переход CSS не влиял на мой JavaScript

Ответы 1

Другие вопросы по теме

Похожие вопросы