CSS3 使用 JavaScript 拖动转换 3d 变换

Question

perspective:400px;
transform-style: preserve-3d;
transform:translateX(-$drawerWidth);
transition: #{$transition};

window.onload = addListeners();

function addListeners(){
    document.getElementById('app').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);

}

function mouseUp()
{
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e){
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e){
  var div = document.getElementById('app');
  div.style.position = 'relative';
  div.style.left = e.clientX + 'px';
}

如上所述，我有一点 CSS 和一点 JS。我正在尝试拖动并显示一个抽屉。我希望拖动不仅可以通过触摸来跟踪应用画布，而且我还希望看到导航抽屉通过 1:1 的变换跟踪拖动和打开，以及应用程序的其余拖动。

想法？我知道这有点难读所以...当您拖动一个 div 时，另一个 div 开始播放它的动画 1:1 沿 x 轴拖动 +1 或 -1。

Answer 1

如果您希望使用 Javascript 控制 CSS 动画，这是一个很好的资源。

http://css-tricks.com/controlling-css-animations-transitions-javascript/

无需深入研究，最简单的方法就是用 jQuery 替换 css 转换样式。在每次鼠标移动时更改它以描述更改。