CSS3 Перевести 3d Transform с JavaScript Drag

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 с перетаскиванием +1 или -1 вдоль оси x.

Answer 1

Если вы хотите управлять анимацией CSS с помощью Javascript, это отличный ресурс.

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

Не вдаваясь слишком глубоко в это самый простой способ пойти об этом, чтобы заменить CSS преобразования стиля с JQuery. Измените его на каждой мусмове, чтобы изобразить изменение.