[Edge]。→、、
Web アニメーション Animation の置換状態を文字列で返します。
mdn： これは、アニメーションが削除された場合にアクティブになります。または Animation.persist() が呼び出された場合は永続化されます。
| Animation | Animation |
|---|
アニメーションの置換状態を表す文字列。値は次のいずれかです：
| active | アニメーションの置換状態の初期値。アニメーションがブラウザーの自動的に塗りつぶしアニメーションを削除する動作によって削除された場合。 |
|---|---|
| persisted | アニメーションは、Animation.persist() を呼び出して明示的に永続化されています。 |
| removed | アニメーションは明示的に削除されました。 |
HTML：
<DIV id=IdTest style="width:1em">■</DIV> <BUTTON id=IdPlay>再生</BUTTON><BR> <BUTTON id=IdSet1>違うアニメーション設定１、play()</BUTTON> <BUTTON id=IdSet2>違うアニメーション設定２、play()</BUTTON> <BR> <SPAN id=IdLog></SPAN>
JavaScript：
KE=new KeyframeEffect( //アニメーション データの作成：
IdTest, [ //ターゲット。
{transform:'translateX(150px)'} //X軸移動。
]
, {duration:1000, fill:'forwards'} //10秒掛けて、？。
);
function JobDel(){ //remove イベントの処理：
D=Ani; //＝[object]：[object Animation]。メイン動作をしてから、新しい動作をさせて動作が終わった所。
詳細
//effect＝[object]：[object KeyframeEffect]
//startTime＝[number]：8259.59
//currentTime＝[number]：1000
//playbackRate＝[number]：1
//playState＝[string]：finished
//pending＝[boolean]：false
//id＝[string]：
//onfinish＝[object]：null
//oncancel＝[object]：null
//cancel＝[function]：function cancel() { [native code] }
//finish＝[function]：function finish() { [native code] }
//pause＝[function]：function pause() { [native code] }
//play＝[function]：function play() { [native code] }
//reverse＝[function]：function reverse() { [native code] }
//updatePlaybackRate＝[function]：function updatePlaybackRate() { [native code] }
//timeline＝[object]：[object DocumentTimeline]
//replaceState＝[string]：active
//…
}
Ani=new Animation(KE, document.timeline); //アニメーション作成。
//Ani.persist();
Ani.onremove=JobDel; //アニメーションが削除されたら…イベント割り当て。
function JobPlay(){ //再生の処理：
Ani.play();
}
function JobSet1(){ //新しいアニメーション１の処理：
KE=new KeyframeEffect( //アニメーション データの作成：
IdTest, [ //ターゲット。
{transform:'translateX(200px)'} //X軸移動。
]
, {duration:1000, fill:'forwards'} //掛かる時間、？。
);
Ani=new Animation(KE, document.timeline); //アニメーション作成。
Ani.onremove=JobDel; //アニメーションが削除されたら…イベント割り当て。
Ani.play(); //再生。
}
function JobSet2(){
KE=new KeyframeEffect( //アニメーション データの作成：
IdTest, [ //ターゲット。
{transform:'translateX(100px)'} //X軸移動。
]
, {duration:1000, fill:'forwards'} //掛かる時間、？。
);
Ani=new Animation(KE, document.timeline); //アニメーション作成。
Ani.onremove=JobDel; //アニメーションが削除されたら…イベント割り当て。
Ani.play(); //再生。
}
IdPlay.onclick=JobPlay; //再生ボタンのイベント割り当て。
IdSet1.onclick=JobSet1; //新しいアニメーション１ボタンのイベント割り当て。
IdSet2.onclick=JobSet2; //新しいアニメーション２ボタンのイベント割り当て。
function Job(){ //タイマー監視処理：
IdLog.innerHTML="replaceState："+Ani.replaceState; //表示。
}
setInterval(Job, 300); //タイマー監視。
remove イベントが発生するタイミング： 次の設定のアニメーション動作が終わった時に発生する。しかも remove イベントなのに replaceState が「active」になっている。
HTML：
<DIV id=IdTest style="width:1em">■</DIV> <BUTTON id=IdSet1>違うアニメーション設定１</BUTTON> <BUTTON id=IdSet2>違うアニメーション設定２</BUTTON> <BR> <SPAN id=IdLog></SPAN>
JavaScript：
function JobDel(){ //remove イベントの処理：
IdLog.innerHTML="replaceState："+Ani.replaceState; //表示
alert("replaceState："+Ani.replaceState); //表示
}
Ani=IdTest.animate({transform:'translateX(150px)'}, {duration:1000, fill:'forwards'});
Ani.onremove=JobDel; //イベント割り当て。
function JobSet1(){
Ani=IdTest.animate({transform:'translateX(100px)'}, {duration:1000, fill:'forwards'});
Ani.onremove=JobDel;
}
function JobSet2(){
Ani=IdTest.animate({transform:'translateX(200px)'}, {duration:1000, fill:'forwards'});
Ani.onremove=JobDel;
}
IdSet1.onclick=JobSet1;
IdSet2.onclick=JobSet2;
function Job(){
IdLog.innerHTML="replaceState："+Ani.replaceState;
}
setInterval(Job, 300);