Анимированный курсор после уже анимированного элемента

Question

У меня есть элемент, который имеет анимацию для увеличения и уменьшения (например, эффект дыхания), и я хочу добавить курсор после.

Мой код работает только при удалении анимации в CSS.

Что я делаю не так?

похоже, что ваш пост в основном кодовый; пожалуйста, добавьте больше деталей.

class FollowCursor {
  constructor(element, window) {
    this.element = element;
    this.w = window;
    this.w.onmousemove = this.move.bind(this);
  }

  move(e) {
    this.element.setAttribute(
      "style",
      `transform: translate(${e.clientX}px, ${e.clientY}px);`
    );
  }
}

const el = document.querySelector(".el")

const cursorFollowing = new FollowCursor(el, window)

 .el {
   position: absolute;
   animation: a-breathing 8s infinite forwards;
   left: 0;
   top: 0;
   width: 30px;
   height: 30px;
   background-color: yellow;
 }

 div {
   position: relative
 }

 @keyframes a-breathing {
   0% {
     transform: scale(1);
   }

   60% {
     transform: scale(1.8);
   }

   100% {
     transform: scale(1);
   }
 }

```

<div>
<div class="el">
</div>
</div>

jsfiddle snippet

Answer 1

Вы перезаписываете свой атрибут transform, так как у вас может быть только один на элемент, поэтому вам нужен элемент для перемещения и еще один элемент div для дыхания; вот решение:

class FollowCursor {
  constructor(element, window) {
    this.element = element;
    this.w = window;
    this.w.onmousemove = this.move.bind(this);
  }

  move(e) {
    this.element.setAttribute(
      "style",
      `transform: translate(${e.clientX}px, ${e.clientY}px);`
    );
  }
}

const el = document.querySelector(".el")

const cursorFollowing = new FollowCursor(el, window)

.el {
   position: absolute;
   left: 0;
   top: 0;
   width: 30px;
   height: 30px;
   background-color: yellow;
 }
.breathing-element {
  animation: a-breathing 8s infinite forwards;
  width: 100%;
  height: 100%;
  background: red;
}
 div {
   position: relative
 }

 @keyframes a-breathing {
   0% {
     transform: scale(1);
   }

   60% {
     transform: scale(1.8);
   }

   100% {
     transform: scale(1);
   }
 }

<div>
<div class="el">
  <div class="breathing-element"></div>
</div>
</div>

Вы также можете объединить несколько значений для атрибута преобразования, следуя этому шаблону:

transform: translate | transform | scale | rotate

Answer 2

Я полагаю, что вы получите ожидаемое поведение, если вы измените эту строку

transform: translate(${e.clientX}px, ${e.clientY}px);

для этого:

position: absolute; top: ${e.clientY}px; left: ${e.clientX}px

Например: https://jsfiddle.net/cxszqdka/