アニメーション終了後のリターン関数
今日はプロジェクトをする時、プログレスバーが終わる時にページを移動します.そして、アニメーションが持っているカスタマイズのコールバック関数を使いました.
(runoob.com)
addEventListener() DIV "animationstart", "animationiteration" "animationend" 。
var x = document.getElementById("myDIV")
// JavaScript
function myFunction() {
x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari Opera
x.style.animation = "mymove 4s 2";
}
// Chrome, Safari Opera
x.addEventListener("webkitAnimationStart", myStartFunction);
x.addEventListener("webkitAnimationIteration", myIterationFunction);
x.addEventListener("webkitAnimationEnd", myEndFunction);
x.addEventListener("animationstart", myStartFunction);
x.addEventListener("animationiteration", myIterationFunction);
x.addEventListener("animationend", myEndFunction);
function myStartFunction() {
this.innerHTML = "animationstart - ";
this.style.backgroundColor = "pink";
}
function myIterationFunction() {
this.innerHTML = "animationiteration - ";
this.style.backgroundColor = "lightblue";
}
function myEndFunction() {
this.innerHTML = "animationend - ";
this.style.backgroundColor = "lightgray";
}
具体的な使い方は初心者教程から来ています.http://www.runoob.com/jsref/event-animationiteration.html const box=document.querySelector('.box');
let value=0;
const add=()=>{
requestAnimationFrame(add);
value+=5;
box.style.transform=`translateX(${value}px)`
}
requestAnimationFrame(add);
function animate(start, end, time, callback) {
let startTime = performance.now() //
console.log(performance.now())
let differ = end - start //
//
function loop() {
raf = requestAnimationFrame(loop) //
const passTime = performance.now() - startTime //
let per = passTime / time //
if (per >= 1) { //
per = 1 //
cancelAnimationFrame(raf) //
}
const pass = differ * per // *
callback(pass) // ,
}
let raf = requestAnimationFrame(loop) //
}
let box = document.querySelector('.box');
animate(0, 400, 1000, value => {
box.style.transform = `translateX(${value}px)` // css transform
})