classをはずすときに便利
classの付け外しでtransitionを発火させる場合、
動き終わったらclass外したい。
transitionで指定した時間だけsetTimeoutで待って、
classをremoveするって書いてた。
めっちゃ力ずく(～'ω' )～
そんなときに便利なのが、
webkitTransitionEnd
webkitTransitionEnd（webkitAnimationEnd）は、
トランジション（アニメーション）が終わった時に起きるイベントらしいです。
なんて便利なんだ！
ひとつ賢くなりました( ^ω^)♡
続、内側下部のシャドー
きれいなボタンを作る！
border、backgroundにlinear-gradient、box-shadowだけだったら・・・
色具合によっては、
こんな感じののっぺりボタンになっちゃいます。
（フォトショ使い方わかんないいいい）
前回書いた内側下部のshadowを追加すると、しまった感じになる。
（フォトショ使い方わかんないいいい）
でもでも、
このままだったらborder-bottomと内側box-shadowが汚い感じになる気がする。
border-bottom: noneにしてあげたら少しマシになった！
でもOKが出ない・・・
よーーーーく見たら、
内側box-shadowにしてたことで、
こんな感じになってることに気がついた！
※太線がborder、細い線が内側box-shadow
box-shadowで内側の線を追加していたけど、
外側に線を付けてあげたらいい感じになった！（ような気がする！）
こんなイメージ。
あれ？
border-bottomだけ色変えてあげれば良かったんじゃ・・・？
( ,,＾v＾)いやいやいやいや…
こんど試してみよ_(:3」∠)_
よく忘れる内側下部のシャドー
グラデーションカラーのボタンがあって、
borderの色がグラデーション下の色と同じくらいだったら
下の内側に白っぽい線を入れることで、境界線が強調できる。
そのときのSCSSのメモ。
（@includeでmixinを持ってきてます）
@include box-shadow(inset 0 -1px 1px 0px #fff);
borderの内側下部に白いシャドーがつきます。
ニョッキぼたーーーーん！
ニョッキぼたん使われないことになったった。
悲しい…
でもでも！
自分が好きなものじゃなくて、
ユーザさんに取ってイイモノを作らないとですよねっ！！
研修までは自分の好きなものばっかり作ってたけど、
仕事はユーザ中心。
まだまだ技術が追いつかなくて
ユーザを忘れがちになっちゃってるな。。
早くちゃんと作れるようになる！！
浮動小数点の誤差
研修でうまくいかなかったのはこれが原因だったのかー。
研修で困ったやーつ。
たしかMath.random()でランダムな値を作って、
それを使ってif文の分岐を作ったんですが、なにやらちゃんと分岐してくれない・・・
ディベロッパーツールで値を見てみると、
0.1が、0.1000000000028とかになってる。
0.1よりちょっと大きいから条件式でうまくいかない。
ふむむむ。
コンソールってみる。
> 0.1 + 0.2 == 0.3
これはfalseになります。
> 0.1 + 0.2 == 0.3
false
> 0.1 + 0.2
で
ターン(enter)
すると
> 0.1 + 0.2 0.30000000000000004
ふむむむ。（なんだあの４・・・）
パーフェクトJS（p51-p52）
"浮動小数点数は、ほとんどの場合小数点以下を正確に表現できない。"
近似値を出していて正確な値は出せない、らしい。
他の言語でも同様らしいので、もしかして常識？
