【javascript】でアニメーションを途中でストップ、再開させる方法
以下のように、アニメーションを途中でストップさせる方法について紹介します。
animationPlayState
animationPlayStateをrunningかpausedにすることで、 アニメーションをストップさせたり、再開させたりすることができます。
animationPlayState : running
const box = document.querySelector(".box");
box.style.animationPlayState = "running";
function stopAni() {
if (box.style.animationPlayState == "running") {
box.style.animationPlayState = "paused";
} else {
box.style.animationPlayState = "running";
}
}応用
以前、一文字ずつアニメーションさせる方法について紹介しましたが、 この方法を使えば、途中でストップさせることができます。
【CSS】【javascript】テキストを1文字ずつアニメーションさせる方法
クイズアプリを作る時に使えそうですね。
東京に住んでいるアメリカ人の友人から、「上から読んでも下から読んでも同じ地名の場所で待っている」という連絡を受けました。この友人はどこにいるのでしょうか？
アニメーションストップ：animationPlayState = "paused"
アニメーションスタート：animationPlayState = "running "
