関西フロントエンドUG Advent Calendar 2015・5日目!
男もすなるあどべんとかれんだーといふものを、おじさんもしてみむとてするなり。
ということで今年一年のあいだに度々お世話になった“関西フロントエンドUG”の記事を書いていたので何か捕捉したり書いたりします。
まずはこちらから…
…早速捕捉することが見つかりました。次の部分間違いです、訂正します。
ネイティブアプリケーションのようなスムースなアニメーションのためには DHTML 時代の setInterval と css-p ではなく、GPU サポートを効かせた CSS3 Transitions と CSS3 Animations が主役です。
CSS3 Transitions と CSS3 Animations は危ないかも
CSS3 Transitions の transitionend イベントが起こらないケースがあるようです。
CSS3 Transitions はあてにせず js で requestAnimationFrame のコールバックから transform スタイルを書き換えるようにしましょう。
かくいう僕も慌ててオレオレフレームワークの DOM アニメーションを絶賛書き換え中 & 午前様です。
イベントの件がなくとも transitionDuration の指定時間と実際の時間が結構ずれるのでシビアな用途では微妙でした。
いろんなところで言及されていますが、css だけで使える便利なアニメーションは、アニメーションし損なっても全然 OK なところにだけ使っておきます。例えば、この記事のサムネイル画像に埋め込んだクリックで拡大機能とか。
捕捉ここまで。絶賛年末進行で午前様なので、このくらいでマジ勘弁してください…
゚ 。 ,∧_∧ ゚。 ゚ ・(゚´Д`゚ )。 (つ ⊃ ヾ(⌒ノ ` J
備忘メモ
座談会#1では、新進気鋭のフレームワークの話でさんざ盛り上がったあとに「LTはオレオレフレームワークです!」と言ったら会場が沸きました。ぇへへ。
肝心のLTでは渾身のネタ「オレオレフレームワークを使えば ie4 でも jQuery ライクに書いてライトボックスとか実装できます!」は軽く失笑が漏れるくらいで、おじさんちょっと寂しかったな…
タッチ & トライ ES6
この他に7月14日開催の“タッチ & トライ ES6”は聞き耳を立てているだけで ES6 が分かりそうだったのでノコノコ参加させていただきました。
#3 「jQueryとクラス設計でスライダーをつくる」 @usagizmo さん
ES6でクラス構文が扱えるようになり、見通しのよいクラス設計が行えるようになりました。DOMと絡めたES6活用方法の一例をご紹介します。
ライブコーディングをした @usagizmo 氏のおかげでなんとなくどんなものか分かりました。
最後のところで class 構文を使ってもコンテキストを維持するために結局まだ self=this; いるじゃん、という結論に終わってましたが…
この記事のために Github を確認すると次のように訂正が。
setPanels() {
- var self = this; - self.panels = []; - self.$el.find('.slider-panel').each(function() { - self.panels.push(new SliderPanel(self, $(this)));+ this.panels = []; + this.$el.find('.slider-panel').each((i, el) => { + this.panels.push(new SliderPanel(this, i, $(el))); }); }
アロー関数が全然ハッピーに見えないのは僕の心が曇っているからなのかなぁ…
ではでは主催者・発表者・参加者の皆様、お疲れ様でした。
ということでアドベントカレンダーの5日目でした、お粗末。メリィーホニャララ!