javascript - 将贴紧度旋转到新的程度，不容易平滑过渡

我有一个非常复杂的问题，因此在这里的任何帮助将不胜感激。基本上，我有一组需要旋转的图像。

我的实际旋转脚本工作正常（如下），但是应该平稳旋转，但不能旋转，它会固定在适当的位置。我在StackOverflow上问这个问题，以试图找出为什么它会弹跳而不平稳旋转。

我使用Google Chrome浏览器。

CSS：

.marker {
  transition: ease 5s;
  -webkit-transition: ease 5s;
}

JavaScript：

function setBearings() {
  for (var i = 0; i < markers.length; i++) {
    var bearing = markers[i][BEARING];
    var service = markers[i][SERVICE];
    var reg = markers[i][REGISTRATION];

    if (bearing != -1) {
      $(".marker.id-" + reg).css({
        'transform':'rotate('+bearing+'deg)',
        '-webkit-transform':'rotate('+bearing+'deg)',
        '-moz-transform':'rotate('+bearing+'deg)',
        '-o-transform':'rotate('+bearing+'deg)',
        '-ms-transform':'rotate('+bearing+'deg)'
      });
    }
  }
}

function updateInfoBoxes() {
  for (var i = 0; i < markers.length; i++) {
    var googleMarker = getMarkerObject(markers[i][REGISTRATION]);

    actualMarkers[i] = document.createElement("div");
    actualMarkers[i].className = "box";
    actualMarkers[i].addEventListener("click", createHandler(i), false);

    if (markers[i][BEARING] == -1) {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/static.png" />';
    } else {
      actualMarkers[i].innerHTML = '<div class="service">' + markers[i][SERVICE] + '</div><img class="marker id-' + markers[i][REGISTRATION] + '" src="images/dynamic.png" />';
    }

    if (infoBoxes[i])
      infoBoxes[i].setContent(actualMarkers[i]);

    infoBoxes[i] = new InfoBox({
       content: actualMarkers[i]
      ,disableAutoPan: true
      ,maxWidth: 0
      ,pixelOffset: new google.maps.Size(-20, -35)
      ,zIndex: 100000
      ,boxStyle: {
        opacity: 1
       }
      ,infoBoxClearance: new google.maps.Size(1, 1)
      ,isHidden: false
      ,pane: "floatPane"
      ,enableEventPropagation: false
    });

    infoBoxes[i].open(map, googleMarker);
  }
  setBearings();
}
updateInfoBoxes();

最佳答案

关于如何执行此操作的快速示例。单击红色框，它将旋转到50度。

http://jsfiddle.net/hmXGF/

.marker{
    transition: ease 5s;
    -webkit-transition: ease 5s;
    -webkit-transform: rotate(10deg);
    background: red;
    width: 200px;
    height: 20px;
}

确保您声明一个基本转换，因此它具有一个起始值。
哦，别忘了为所有其他浏览器朋友提供所有出色的前缀。希望这可以帮助。