DOM

：

：

KeyframeEffect.pseudoElement プロパティ

　編集：2022.10.24 by T.A.

[Edge]？。→、、

KeyframeEffect に割り当てられている疑似要素のセレクターを取得／設定します。

これは、疑似要素を対象としないアニメーションの場合は null になる場合があります。

構文
KeyframeEffect.pseudoElement
KeyframeEffect KeyframeEffect オブジェクト。
値

例
簡単なアニメーション

HTML： 

<DIV id=IdTest style="width:1em">■</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

KE=new KeyframeEffect(  //アニメーション効果：
  IdTest,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(0)'}
    , {transform:'translateX(200px)'}  //X軸移動、透明度。
  ], 
  {duration:3000, fill:'forwards'}  //掛ける時間、プロパティ反映の仕方。
);
Ani=new Animation(KE, document.timeline);  //アニメーション生成。
D=KE.target;

//Ani.play();  //再生。

→CSS：transform。CSS：translateX()。duration、fill。

→new Animation()、play()。

疑似要素

以下のCSSが組み込んであります： 


 
HTML：
 
<UL>UL要素
  <LI class=Test id=IdTest style="width:1em">LI要素
</UL>
<SPAN id=IdLog></SPAN>


 
JavaScript：
 
IdAni=document.querySelector('.Test::before');
KE=new KeyframeEffect(  //アニメーション効果：
  IdAni,  //ターゲット要素。
  [        //キーフレーム。
    {transform:'translateX(0)'}
    , {transform:'translateX(200px)'}  //X軸移動、透明度。
  ], 
  {duration:3000, fill:'forwards'}  //掛ける時間、プロパティ反映の仕方。
);
Ani=new Animation(KE, document.timeline);  //アニメーション生成。
D=KE.pseudoElement;


 
IdAni が null になっていて、要素が得られない。
 
→querySelector()。
 
それから、
 
KE=new KeyframeEffect(
  IdTest,  //ターゲット要素。
  …
D=KE.pseudoElement;


 
としても、要素は得られなかった。









テスト