jquery.pep.jsでコールバックが受け取れない

スムーズなドラッグ＆ドロップを実現してくれる便利なjqueryプラグイン、
「Pep」を使っていて気がついたことがあったのでメモ。

このプラグインは指定した要素をドラック＆ドロップなどのマウス操作に対応させ、
さらにキネティックに動かすことができるようになります。

ただし、問題点がひとつ。
指定した要素をJavacriptなどで制御したときにコールバックが受け取れない問題がありました。

たとえば、

    $(@el).pep({
      cssEaseDuration: 500
      rest: =>
        console.log 'rest!'

とすると、マウス操作した際は操作完了後に’rest!’とでてきますが、
下記のようにマウス操作以外のなんらかのタイミングでjavascriptなどで移動させるとコールバックが機能しません。

    $(@el).css({
      left: 100
      height: 100
    })

色々調べてみると、マウス操作などではanimateメソッドで動かしているが、
CSSメソッドで動作させるとCSS3のアニメーション機能で動かしていることがわかりました。

CSS3アニメーションの完了イベントはwebkitTransitionEndなので、
下記のようにイベントを監視します。

    $(@el).on(
      'webkitTransitionEnd'
      (e)=>
        console.log 'rest!'
    )

無事コンソールに'rest!'が表示されました。

ただ複数回コールバックが呼ばれてしまうので、
完了後に適宜offするなどしてください。