ランタイム CSS ミニファイアーが無効な CSS アニメーション アクションを作成する

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

問題

•  transition: background-color 5000s ease-in-out 0s;
  

  になる
  

   transition: background-color 5000s ease-in-out 0;

  縮小化が使用されている場合。
• ビルド時に CSS がコンパイルされますが、実行時に Liferay にデプロイされると、出力はミニファイアが使用されているかどうかによって異なります。
  • ミニファイヤがないと、アクションは変更されず、ブラウザで機能します。
  • minifier を使用すると、タイム アクション '0s' が '0' に変更されますが、これは無効です。

Environment

• DXP 7.0+

解決策

• 一部のブラウザーは、最終的なプロパティが時間値ではないと想定し、縮小された CSS から「s」を除外します。
• この場合は、この 記事で説明されているように、キーフレームを使用することで解決できます。
• 別の回避策は、0 の値を 1 ミリ秒に変更することです。