1

我有一个相当复杂的问题，所以这里的任何帮助将不胜感激。基本上，我有一组需要旋转的图像。

我的实际旋转脚本工作正常（如下）但是，它应该平滑旋转，但它没有，它卡入到位。我在 StackOverflow 上问这个问题，试图找出它为什么会卡住，而不是平滑旋转。

我使用谷歌浏览器作为我的浏览器。

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();
4

1 回答 1

0

如何做到这一点的真正快速示例。单击红色框，它将旋转到 50 度。

http://jsfiddle.net/hmXGF/

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

确保你声明了一个基本转换，所以它有一个开始的值。哦，对于其他浏览器朋友，不要忘记所有美妙的前缀。希望这可以帮助。

于 2013-07-28T15:34:58.820 回答