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如上所述。我试图拖动并露出一个抽屉。我希望拖动不仅可以通过触摸来跟踪app-canvas，而且我还希望看到导航抽屉拖动和打开，变换跟踪1：1，其余的拖动应用程序。

思考？我知道这有点难以阅读......当你拖动一个div时，另一个div开始以1：1的速度播放它的动画，沿着x轴拖动+1或-1。

Answer 1

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

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

如果不深入研究它，最简单的方法就是用jQuery替换css转换样式。在每个鼠标上更改它以描绘更改。

CSS3使用JavaScript拖动翻译3d变换

1 个答案: