Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 如何检测伪元素上的 animationend 事件？

In lại 作者：塔克拉玛干 更新时间：2023-11-02 21:42:50 25 4
mua khóa gpt4 Nike

我知道如何使用常规 DOM 元素检测 animationend 事件，但如何使用伪元素检测？

我知道要查找的事件是 animationend，但如何使用该事件将伪元素附加到处理程序？

我已经尝试了以下方法，但我似乎无法让它工作。

document.querySelector("#someSelector:after").addEventListener("animationend",...,false)

我如何在原生 JavaScript 中执行此操作？

1 Câu trả lời

:after 伪元素不能被选择，就好像它们是 DOM 的一部分一样，因为简而言之，它们不是 DOM 的一部分。也就是说，有可能获得您期望的事件触发器，因为它们是在 :after 的“父级”上触发的。

例如，如果您的 :after nằm trong nhận dạng vì 'containybox' 的 DOM 元素上，那么您可以获取该 DOM元素并在其 animationend 上触发。该事件将在 :after 的动画结束时触发。

var containerBox = document.getElementById('containybox');    

containerBox.addEventListener('animationend', function() {
  console.log("Animation ended!");
});

完整的工作片段:

var containerBox = document.getElementById('containybox');

containerBox.addEventListener('animationend', function() {
  console.log("Animation ended!");
});

containerBox.addEventListener('transitionend', function() {
  console.log("Transition ended!");
});
#containybox {
  vị trí: tương đối;
  width: 100px;
  height: 100px;
  background: #fadebc;
  padding: 10px;
  căn chỉnh văn bản: ở giữa;
}
#containybox:after {
  content: "Standard aftermibob.";
  hiển thị: khối;
  position: fixed;
  left: 120px;
  width: 100px;
  height: 100px;
  background: #bcdefa;
  animation: animatedBackground 1000ms linear;
}
#containybox:hover:after {
  background: #bcfade;
  transition: background-color 1000ms linear;
}
@keyframes animatedBackground {
  from {
    background-color: #000000;
  }
  to {
    background-color: #bcdefa;
  }
}

  Just a standard containybox.

关于javascript - 如何检测伪元素上的 animationend 事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31284401/

25 4 0
Bài viết được đề xuất: iphone - CGContextShowText 绘制居中对齐
Bài viết được đề xuất: android - 使用 chrome 进行远程调试仅适用于较旧的人行横道版本 [cordova 4]
Bài viết được đề xuất: android - 突然，无法启动Android模拟器了
Bài viết được đề xuất: ios - 如何根据 resize 调整 UITextView 的宽度？
塔克拉玛干
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com