私は要素を持っていますし、キーダウンを押して、左下の要素を左に移動したいと思います。

Question

私はクラス名side-build-boxcontrol-preseve-3dを持っています。要素は左、左、右を下に移動しますので、右に左に、私は3DでのCSSのでtranslate3dプロパティを使用しますが、私はいつもあなたがreturn lastpos[0];、return lastpos[1];、return lastpos[2];を使うべきではありません

import obj from './selection'; //import obj is equal to queryselector 

function transformer(e) { 
     let sbcp3d = obj.select('.side-build-boxcontrol-preserve-3d'); 
     sbcp3d.style.transform = 
     'translate3d(400px,150px,6px)rotatez(30deg)'; 
     var lastpos = [null, null, null]; 
     var tx = 0; 
     var ty = 0; 
     var rz = 0; 
     var key = function(e) { 
      return e.keyCode; 
      } 
     var transx = 400, 
     transy = 150, 
      transz = 6; 

      if (key() == 38) { 
      console.log('38') 
      transx += 100; 
      transx = tx; 
      lastpos[0] += tx; 
      if (lastpos[0] != null) { 
       console.log('lastpos[0]+tx') 
       lastpos[0] += transx; 
       return lastpos[0]; 
      } 
    if (key() == 40) { 
     console.log('40'); 
     transx -= 100; 
     transx = tx; 
     lastpos[0] -= tx; 
     if (lastpos[0] != null) { 
      console.log('lastpos[0]') 
      lastpos[0] -= transx; 
      return lastpos[0]; 
     } 
     if (key() == 37) { 
      transy += 100; 
      transy = ty; 
      ty += lastpos[1]; 
      if (lastpos[1] !== null) { 
       console.log(lastpos[1]); 
       lastpos[1] += transy; 
       return lastpos[1]; 
      } 
     } 
     if (key() == 39) { 
      transy -= 100; 
      transy = ty; 
      ty -= lastpos[1]; 
      if (lastpos[1] !== null) { 
       console.log(lastpos[1]); 
       lastpos[1] -= transy; 
       return lastpos[1]; 
      } 
     } 
     var transform = '(translate3d(' + lastpos[0] + 'px,' + lastpos[1] + 'px,6px)rotatez(' + rz + 'deg)'; 
     sbcp3d.style.transform = transform; 

    } 
    } 
    } 



    module.exports = transformer; 

    index.js 
    import transformer from './graphic'; 
    document.addEventListener('keydown'transformer();); 

Answer 1

を働いていない、多くの異なる方法を試してみました。コードが実行されると、トランス機能は終了しますので、 var transform = '(translate3d(' + lastpos[0] + 'px,' + lastpos[1] + 'px,6px)rotatez(' + rz + 'deg)'; sbcp3d.style.transform = transform;は実行されません。 これは機能していないので、return lastpos[0];などを削除し、document.addEventListener('keydown'transformer(););をdocument.body.addEventListener('keydown',transformer);

に置き換えることができます