Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/Animation/commitStyles below:

Animation: commitStyles() メソッド - Web API

Baseline Widely available

commitStyles() はウェブアニメーション API の Animation インターフェイスのメソッドで、アニメーションの現在のスタイルの計算値をターゲット要素の style に書き込みます。 commitStyles() はアニメーションが自動削除されていてもうまく動作します。

commitStyles() は fill と組み合わせて使用することができ、アニメーションが終わった後も最終的な状態を維持させることができます。同じ効果は fill だけでも得られますが、無期限に満たすアニメーションを使用することは推奨されません。アニメーションはすべての静的スタイルよりも優先されますので、無期限の塗りつぶしアニメーションは対象とする要素が通常のスタイル設定をされることを妨げる可能性があります。

commitStyles() を使用することができます スタイル設定は要素の style 属性に書き込まれます。

なし。

なし (undefined)。

この例では、"Commit styles" と "Fill forwards" とラベル付けされた2つのボタンがあります。どちらのボタンもクリックするとアニメーションし、アニメーションの最終状態を維持します。

しかし、異なる点は、 "Fill forwards" は fill: "forwards" これは、ブラウザーがアニメーションの状態を無期限に、あるいは自動的に除去されるまで維持しなければならないことを意味しています。

しかし、 "Commit styles" ボタンはアニメーションが終了するのを待ち、 commitStyles() を呼び出されてからアニメーションを取り消しますので、完了したスタイルはアニメーションの状態ではなく style 属性の値として取り込まれます。

<button class="commit-styles">Commit styles</button>
<br />
<button class="fill-forwards">Fill forwards</button>

button {
  margin: 0.5rem;
}

const commitStyles = document.querySelector(".commit-styles");
let offset1 = 0;

commitStyles.addEventListener("click", async (event) => {
  // Start the animation
  offset1 = 100 - offset1;
  const animation = commitStyles.animate(
    { transform: `translate(${offset1}px)` },
    { duration: 500, fill: "forwards" },
  );

  // Wait for the animation to finish
  await animation.finished;
  // Commit animation state to style attribute
  animation.commitStyles();
  // Cancel the animation
  animation.cancel();
});

const fillForwards = document.querySelector(".fill-forwards");
let offset2 = 0;

fillForwards.addEventListener("click", async (event) => {
  // Start the animation
  offset2 = 100 - offset2;
  const animation = fillForwards.animate(
    { transform: `translate(${offset2}px)` },
    { duration: 500, fill: "forwards" },
  );
});

• ウェブアニメーション API
• Animation: ウェブページのアニメーションを制御することができるその他のメソッドやプロパティ

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4