I am practicing Deno Fresh, and currently I am attempting to learn how to add animations to islands. I have written the basic island below, including an animation method.
export default function StartAnimation() {
function animation(): void {
const _id = setInterval(frame, 10);
const target = document.getElementById("target");
let degree = 1;
function frame() {
target!.style.transform = `rotate(${degree}deg)`;
if (degree === 360) {
degree = 0;
} else {
degree++;
}
}
}
return (
<div id="frame">
<div id="target" onLoad={animation}>Test animation</div>
</div>
)
}
When running deno task start
, I get no errors, and the div appears without issue, but the animation does not run.
Is there anything wrong with my code, and more generally is there a standard way to add animations to islands within Deno Fresh?