ウェブアニメーションapiによって設定されたスタイルをオーバーライドします

Question

ウェブアニメーションapiを使用して特定の高さにdivをアニメーションします。ポストアニメーションの高さを保持するために、「forwards」という塗りつぶしモードを使用しています。しかし、後で私は手動でCSSを使って高さを 'auto'に戻したいと思いますが、fillモードをforwardに設定することで、アニメーションが終了した後でCSSのheightプロパティに影響を及ぼすことができなくなっているようです要素。

アニメーションが再生された直後に高さをautoに戻すことができないため、 'forwards'で設定したプロパティをオーバーライドする方法があるのでしょうか？

Answer 1

CSS AnimationsとWeb Animations APIで設定されたスタイルは、CSSカスケードのアニメーションレベルに影響します。仕様のcombining effectsセクションにこれの説明があります。その結果、スタイルシートまたはスタイル属性でスタイルを設定した場合、そのスタイルが!importantでない限り、アニメーションスタイルはそれを上書きします。あなたが何か他のものとの「塗りつぶし」スタイルを交換したい場合は

1. 、あなたのスタイルを更新し、同時にアニメーションにcancel()を呼び出す：あなたのケースで

   は、オプションのカップルを持っています。

2. FLIPアニメーションを使用します。つまり目的のスタイルを目的の高さに設定します。同じ高さでアニメーションを終了させ、フォワードフィルモードを使用しないでください。 Firefox/Chrome/polyfillでは、アニメーションのエンドポイントを指定する必要がないため、この部分を簡単にするためのアップデートがリリースされるはずです。

Answer 2

私は記事をオンラインで読んだので、どこで見つけたのか思い出せません。しかし、CSSは塗りつぶしモードのスタイルを上書きすることはできません。

私は、期間を0にしてお互いのプロパティをアニメーション化するだけの関数を作成しました。

それは次のようになります。

setWebAnimationApiStyles(nativeElement, styleTargets) { 
    return new Promise((res, rej) => { 
     const animation = nativeElement.animate([styleTargets, styleTargets], { duration: 0, delay: 0, fill: 'forwards' }); 
     animation.onfinish = (evt) => { 
     res(animation); 
     }; 
     animation.play(); 
    }); 
    } 

スタイルのターゲットオブジェクトは、あなたのWebアニメーションオブジェクトを持っているだろうかフォーマットされたばかりのオブジェクトである：

{  
    height: 'auto' 
} 

そして、今のために働くようです。