滑らかな要素移動

画面の上から降りてくる通知ダイアログ部品のように、シングルページアプリケーションではDOM 要素の移動アニメーションを利用することが多く、近年の環境では CSS アニメーション、下位互換を考えた場合には jQuery といったライブラリを使うことかと思います。

http://hkitago.tumblr.com/post/166998101130


ページスクロールの参考コードを応用しバニラやピュアと呼ばれる手法で書き流用できるようにしました。

var moveTo = function(element, to, duration, speed, direction) {
  var rect = element.getBoundingClientRect()
  ,   difference = to - (direction === false ? rect.top : rect.left)
  ,   perTick = difference / duration * speed;
  setTimeout(function() {
    if(direction === false) {
      element.style.top = rect.top + perTick + 'px';
      if(parseFloat(element.style.top) === to) return;
    } else {
      element.style.left = rect.left + perTick + 'px';
      if(parseFloat(element.style.left) === to) return;
    }
    moveTo.call(this, element, to, duration - 10, speed, direction);
  }, 10);
};

検証

<div id="div"></div>
<div id="step"></div>
<style>
body { margin:0; padding:0; }
#div { position:absolute; z-index:0; width:100px; height:100px; background-color:yellow; border-radius:50%; }
#step { position:fixed; z-index:1; width:300px; height:300px; border-right:1px solid lightgray; border-bottom:1px solid lightgray; }
</style>
<script>
setTimeout(function(){
  moveTo.call(this, document.getElementById('div'), 300, 1000, 20, 1);
}, 1000);
</script>

余談ですが、アプリにライブラリを使うと著作権表示の実装が面倒ということもあってこちらを再確認。

参考

投稿者: hkitago

個人事業主でウェブと iOS, Android アプリの開発者で一児の父親。JavaScript, ActionScript, AppleScript, PHP, SQL, ObjC, Swift, Java の読書実行試験運用管理を生業とし、Bind, Postfix, Apache を MacOS で使い、エディタは Vi, mi, Kod, Smultron, TextWrangler を経て Coda, Xcode, Android Studio といった IDE と CotEditor を重用しています。