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: translate(${e.clientX}px, ${e.clientY}px);

为此：

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

例如：https://jsfiddle.net/cxszqdka/

Answer 2

您正在覆盖您的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属性组合多个值：

transform: translate | transform | scale | rotate

在已经动画的元素之后对光标进行动画处理

2 个答案: