読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

js経由でcss keyframeアニメーションを使う

jeremyの記事

  • 60 FPS or Bust: Dynamically Prerendering CSS Animations - Jeremy Kahn's Dev Blog
  • 書いてる内容
    • htmlでのアニメーションは長年jsしかなかった
    • 最近の収穫はcssアニメーションはパワフル。けど柔軟じゃない
    • アニメーションのcssスタイルのセットをサクッと作ること、サクッとページに適用すること
    • htmlやcssファイルにkeyframeアニメーション用のcssスタイルを一切書かず、js経由で生成・適用するやり方の紹介
  • requestanimationframeは関係ない
  • jsライブラリRekapiを使って色々楽をする
    • style生成
    • polyfill

やってること

cssのkeyframeアニメーションやるならこんなスタイルを書く。

.stylie {
  -moz-animation-name: stylie-transform-keyframes;
  -moz-animation-duration: 2000ms;
  -moz-animation-delay: 0ms;
  -moz-animation-fill-mode: forwards;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: stylie-transform-keyframes;
  -ms-animation-duration: 2000ms;
  -ms-animation-delay: 0ms;
  -ms-animation-fill-mode: forwards;
  -ms-animation-iteration-count: infinite;
  -o-animation-name: stylie-transform-keyframes;
  -o-animation-duration: 2000ms;
  -o-animation-delay: 0ms;
  -o-animation-fill-mode: forwards;
  -o-animation-iteration-count: infinite;
  -webkit-animation-name: stylie-transform-keyframes;
  -webkit-animation-duration: 2000ms;
  -webkit-animation-delay: 0ms;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  animation-name: stylie-transform-keyframes;
  animation-duration: 2000ms;
  animation-delay: 0ms;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
}
@-moz-keyframes stylie-transform-keyframes {
  0% {-moz-transform:translateX(0px) translateY(0px);}
  100% {-moz-transform:translateX(400px) translateY(0px);}
}
@-ms-keyframes stylie-transform-keyframes {
  0% {-ms-transform:translateX(0px) translateY(0px);}
  100% {-ms-transform:translateX(400px) translateY(0px);}
}
@-o-keyframes stylie-transform-keyframes {
  0% {-o-transform:translateX(0px) translateY(0px);}
  100% {-o-transform:translateX(400px) translateY(0px);}
}
@-webkit-keyframes stylie-transform-keyframes {
  0% {-webkit-transform:translateX(0px) translateY(0px);}
  100% {-webkit-transform:translateX(400px) translateY(0px);}
}
@keyframes stylie-transform-keyframes {
  0% {transform:translateX(0px) translateY(0px);}
  100% {transform:translateX(400px) translateY(0px);}
}
  • これをhtmlファイルやcssファイルに直書きすると、柔軟じゃないので、それはやらない
  • cssのkeyframeアニメーションに必要なcssセレクタと@keyframe宣言のリストをオンザフライで生成
  • リストは文字列として生成
  • style要素を生成し、そこにスタイルのリストを突っ込む
  • style要素をdomツリーに突っ込む
  • 要らなくなったら破棄とか、新たに足すとか、あとは柔軟に

スタイルのリストを生成する手間を軽減するのがrekapi

js経由でcssスタイルを作るやり方は2つ

  • DOMツリー触らないなやり方と、style要素だけ操作するやり方の2つ
  • CSSStyleSheetオブジェクト使うのが1つ
    • document.styleSheetsで取れる
    • このオブジェクトにスタイルor宣言をadd/deleteする
    • jsのオブジェクトの操作になるけど追加は深く考えないでできる
    • 削除が面倒そう
      • 削除するメソッドに削除したいセレクタor宣言のindexを指定して消す方法しか無さそう
      • ベストプラクティスがわからん
  • style要素に突っ込むのがjeremyが使ってるやつ
    • Rekapiのテクニックもこっちを使ってる