Is it possible to detect when a new Web Animation API is created? Something like an event-listener on the creation of Web Animation.
I guess that by pooling document.getAnimations() every few ms it should be possible, but I'd prefer a more resilient approach. When it is a CSS animations, I can use document.addEventListener("transitionstart", () => {…}) but I'm looking for something that works for all animations.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#animatedElt {
/* Any change will take 1s to complete */
transition: all 5000ms;
}
moved {
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<main id="screenshotTarget" style="background-color: red; width: 1000px; height: 800px;">
This element will be paused in the middle of the transition. Can I then move it to a <b>precise</b> point it time, like move forward by 0.5s?
<div id="animatedElt" style="background-color: blue; width: 100px; height: 100px;" class="fadeMeMoveMeAnim">
</div>
</main>
<script>
document.addEventListener("transitionstart", () => {
console.log("a transition starts. I want the same think but not specific to transitions");
});
setTimeout(() => {
document.getElementById("animatedElt").style.transform = "translate(100px, 100px)";
document.getElementById("animatedElt").style.backgroundColor = "green";
setTimeout(() => {
document.getAnimations().map(anim => {
anim.pause();
});
setTimeout(() => {
document.getAnimations().map(x => {
x.currentTime += 500;
})
}
, 1000);
}, 2000);
}, 0)
</script>
</body>
</html>
Is it possible to detect when a new Web Animation API is created? Something like an event-listener on the creation of Web Animation.
I guess that by pooling document.getAnimations() every few ms it should be possible, but I'd prefer a more resilient approach. When it is a CSS animations, I can use document.addEventListener("transitionstart", () => {…}) but I'm looking for something that works for all animations.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
#animatedElt {
/* Any change will take 1s to complete */
transition: all 5000ms;
}
moved {
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<main id="screenshotTarget" style="background-color: red; width: 1000px; height: 800px;">
This element will be paused in the middle of the transition. Can I then move it to a <b>precise</b> point it time, like move forward by 0.5s?
<div id="animatedElt" style="background-color: blue; width: 100px; height: 100px;" class="fadeMeMoveMeAnim">
</div>
</main>
<script>
document.addEventListener("transitionstart", () => {
console.log("a transition starts. I want the same think but not specific to transitions");
});
setTimeout(() => {
document.getElementById("animatedElt").style.transform = "translate(100px, 100px)";
document.getElementById("animatedElt").style.backgroundColor = "green";
setTimeout(() => {
document.getAnimations().map(anim => {
anim.pause();
});
setTimeout(() => {
document.getAnimations().map(x => {
x.currentTime += 500;
})
}
, 1000);
}, 2000);
}, 0)
</script>
</body>
</html>
1 Answer
Reset to default 2No, there's no way to platform-native way to detect new Web Animations.
Depending on your requirements, however, you may be able to monkey-patch the Animation constructor and Element.animate to specifically capture animations created via script.
For example,
(function () {
const OriginalAnimation = Animation;
window.Animation = function (...args) {
console.log('Animation created with args:', args);
return new OriginalAnimation(...args);
};
window.Animation.prototype = OriginalAnimation.prototype;
Object.setPrototypeOf(window.Animation, OriginalAnimation);
})();
In Firefox, internally there is an animation observer interface specifically for detecting new, removed, and updated animations. This is used to implement the Animation inspector in DevTools. I suspect Chrome and Safari may have something similar for their DevTools. However, this has never been standardized and is not available to regular Web content.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744172427a4561599.html
评论列表（0条）