Как я могу избежать автоматического выравнивания влево при вращении? - PullRequest
Новая
       3

Как я могу избежать автоматического выравнивания влево при вращении?

0 голосов
/ 01 февраля 2019

Я пытаюсь переместить и повернуть объект в направлении щелчка мыши.К сожалению, при первом клике объект автоматически выравнивается по левому краю.Он отлично работает после первого клика, но не работает во время первого клика.Я не мог выяснить, почему он автоматически переходит в верхний левый угол.Как я могу это исправить?Вот код: 

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
  var xPosition = e.clientX;
  var yPosition = e.clientY;
  var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
  var box = $("#thing");
  var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
  var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
  theThing.style.transform += "rotate(" + angle + "deg)";
  setTimeout(function() {
    theThing.style.transform = translate3dValue;
  }, 500);
}
body {
      background-color: #FFF;
      padding: 0;
      margin: 0;
    }
    
    #contentContainer {
      width: 550px;
      height: 350px;
      border: 15px #EDEDED;
      overflow: hidden;
      background-color: #F2F2F2;
      cursor: pointer;
    }
    
    #thing {
      width: 75px;
      height: 75px;
      background-color: rgb(255, 207, 0);
      border-radius: 0%;
      transform: translate3d(200px, 100px, 0);
      transition: transform.2s ease-in;
    }
    
    #triangle {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 45px solid transparent;
      border-bottom: 75px solid black;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
  <div id="thing">
    <div id="triangle">
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 01 февраля 2019

Поскольку изначально преобразование установлено в CSS, таким образом, вы не можете добавить вращение к нему и просто переопределите его.Сделайте это встроенным с помощью JS, и он будет работать нормально.Он будет вести себя как следующие, так как позже вы добавите все встроенные преобразования: 

var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var triangle = document.querySelector("#triangle");
container.addEventListener("click", getClickPosition, false);

theThing.style.transform="translate3d(200px, 100px, 0)";

function getClickPosition(e) {
  var xPosition = e.clientX;
  var yPosition = e.clientY;
  var translate3dValue = "translate3d(" + xPosition + "px," + yPosition + "px,0)";
  var box = $("#thing");
  var boxCenter = [box.offset().left + box.width() / 2, box.offset().top + box.height() / 2];
  var angle = Math.atan2(xPosition - boxCenter[0], -(yPosition - boxCenter[1])) * (180 / Math.PI);
  theThing.style.transform += "rotate(" + angle + "deg)";
  setTimeout(function() {
    theThing.style.transform = translate3dValue;
  }, 500);
}
body {
      background-color: #FFF;
      padding: 0;
      margin: 0;
    }
    
    #contentContainer {
      width: 550px;
      height: 350px;
      border: 15px #EDEDED;
      overflow: hidden;
      background-color: #F2F2F2;
      cursor: pointer;
    }
    
    #thing {
      width: 75px;
      height: 75px;
      background-color: rgb(255, 207, 0);
      border-radius: 0%;
      /*transform: translate3d(200px, 100px, 0);*/
      transition: transform.2s ease-in;
    }
    
    #triangle {
      width: 0;
      height: 0;
      border-left: 30px solid transparent;
      border-right: 45px solid transparent;
      border-bottom: 75px solid black;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="contentContainer">
  <div id="thing">
    <div id="triangle">
    </div>
  </div>
</div>
...