将图像变换 + 过渡（旋转）x 度

Question

我有一个箭头图像，我想根据我在 javascript (g_drivers[i].heading) 中获得的度数来转动它。

<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">

这工作正常。我每 3 秒左右得到一个度数，图像按该值旋转。

我现在希望度数每 3 秒左右变化一次时平滑过渡。

CSS 必须看起来像这样......

.dir_img {
   transition: transform 2s;
}

由于某种原因，.dir_img 类没有捕捉到这种转换。

---

我正在通过以下方式添加元素：

我正在用 JavaScript 变量创建 HTML：

var html = '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">' 

然后我像这样附加这个：

document.getElementById('sidebar-scroll').innerHTML = html;

由于某种原因，这不起作用。

---

这是函数，我在其中添加了 Kosh Very 的代码，但仍然无法正常工作：

function displayDriversInSidebar() {
 var countM = 0; //Moving
 var countS = 0; //Standing
 var countI = 0; //Inaktiv (no_signal = 1)
 var countO = 0; //Offline (online = 0)
 var activeCSS = '';
 var status_img;
 var dir_img;
 var movingDrivers = '<tbody class="sidebar_header"><tr><td>In Bewegung<span id="moving_counter">0</span></td></tr></tbody><tbody>';
 var standingDrivers = '<tbody class="sidebar_header"><tr><td>Steht <span id="standing_counter">0</span></td></tr></tbody><tbody>';
 var inactiveDrivers = '<tbody class="sidebar_header"><tr><td>Inaktiv <span id="inactive_counter">0</span></td></tr></tbody><tbody>';
 var offlineDrivers = '<tbody class="sidebar_header"><tr><td>Offline <span id="offline_counter">0</span></td></tr></tbody><tbody>';

for (var i = 0; i < g_drivers.length; i++) {
  if (g_drivers[i].updated == 'yes') {
    status_img = 'images/sidebar/signal3.png';
  } else if (g_drivers[i].updated == 'waiting') {
    status_img = 'images/sidebar/signal2.png';
  } else if (g_drivers[i].updated == 'NA') {
    status_img = 'images/sidebar/signal1.png';
  } else {
    status_img = 'images/sidebar/signal0.png';
  }

  if (g_drivers[i].heading === 0 || isNaN(g_drivers[i].heading) === true || g_drivers[i].headingOldCounter >= 30) {
    dir_img = 'images/sidebar/no_dir.png';
  } else {
    dir_img = 'images/sidebar/arrow.png';
  }

  if (g_activeID == g_drivers[i].uuid) {
    activeCSS = ' active';
  } else {
    activeCSS = '';
  }

  if (g_drivers[i].online === true) {
    if (g_drivers[i].headingOldCounter >= 30 && g_drivers[i].no_signal == 0){
      g_drivers[i].heading = 0;
      countS += 1;
      standingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
      '<div class="row_container">' +
      '<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
      '<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
      '<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' +
      //'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
      '<img id="img_' + g_drivers[i].uuid + '" class="dir_img" src="' + dir_img + '">' +
      '</div>' +
      '</td></tr>';
    } else if (g_drivers[i].no_signal == 1) {
      countI += 1;
      inactiveDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
      '<div class="row_container">' +
      '<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
      '<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
      '<div id="driver_info" class="driver_info"></div>' +
      '' +
      '</div>' +
      '</td></tr>';
  } else {
    countM += 1;
    movingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
      '<div class="row_container">' +
      '<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
      '<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
      '<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' + //<p class="img__description">' + timeConverter(g_drivers[i].signal_time) + '</p>
      //'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
      '<img id="img_' + g_drivers[i].uuid + '" style="transition: transform 2s;" src="' + dir_img + '">' +
      '</div>' +
      '</td></tr>';
  }
} else if (g_drivers[i].online === false) {
  countO += 1;
  offlineDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
    '<div class="row_container">' +
    '<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
    '<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
    '<div class="driver_info">  </div>' +
    '</div>' +
    '</td></tr>';
} else {
  console.log('Hier darf eigentlich nix passieren');
}
}
movingDrivers += '</tbody>';
inactiveDrivers += '</tbody>';
standingDrivers += '</tbody>';
offlineDrivers += '</tbody>';
document.getElementById('sidebar-scroll').innerHTML = '<table class="sidebar_table">' + movingDrivers + standingDrivers + inactiveDrivers + offlineDrivers + '</table>';


document.getElementById('moving_counter').innerHTML = countM;
document.getElementById('standing_counter').innerHTML = countS;
document.getElementById('inactive_counter').innerHTML = countI;
document.getElementById('offline_counter').innerHTML = countO;

for (var j = 0; j < g_drivers.length; j++) {
  if (g_drivers[j].online === true && g_drivers[j].no_signal === 0 && g_drivers[j].headingOldCounter < 30) {
  //added the following line, to get better data-values
    g_drivers[j].heading = Math.random()*360;
    document.getElementById('img_' + g_drivers[j].uuid).style.transform = 'rotate(' + g_drivers[j].heading + 'deg)';
  }
 }
}

Answer 1

CSS 过渡允许您平滑地更改属性值（从 一个值到另一个值），在给定的持续时间内。

但是，您并没有更改代码中的属性（转换）。您正在替换 img，因此它没有 start 和 end 的 transition 值。

像这样：

var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';

setInterval(function() { // emulating the data changes continuously

  var g_drivers = [
    {id:1, heading: ~~(Math.random()*360)},
    {id:2, heading: ~~(Math.random()*360)}
  ];

  var html = '';

  for (var i in g_drivers) 
    html += '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">'; 

  document.getElementById('sidebar-scroll').innerHTML = html;
}, 500);

.dir_img {
   width:70px; margin:20px;
   transition: transform 2s;
}

<div id="sidebar-scroll"></div>

但如果您需要应用 transitions，则必须保留图像并更改其 transform 属性，如下所示：

var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';

var sidebar = document.getElementById('sidebar-scroll');

// setting up the drivers (initially empty):
var drivers = {};

// emulating the data changes continuously
setInterval(function() { 

  var drivers_data = {
    'driver_1': {heading: ~~(Math.random()*360)},
    'driver_2': {heading: ~~(Math.random()*360)}
  };

  for (var i in drivers_data) {
    if (!drivers[i]) {  // it's a new driver, lets add it:
        drivers[i] = Object.assign({}, drivers_data[i]);
        sidebar.innerHTML += '<img id="' + i + '" class="dir_img" src="' + dir_img + '">';
    }
    
    // now change driver's property:
    document.getElementById(i).style.transform = 'rotate(' + drivers_data[i].heading + 'deg)';
  }
  
}, 1000);

.dir_img {
   width:70px; margin:20px;
   transition: transform .7s;
}

<div id="sidebar-scroll"></div>

Answer 2

使用CSS transitions。这将使您在转换之间放松。将其与您应该使用的 setInterval 结合起来，以获得每次迭代所需的转换量。

例如，下面的 sn-p 将在200ms（毫秒）的过程中在当前transform 和目标transform 之间转换ease。

const img = document.getElementById("image"),
  input = document.getElementById("amount");

let curr = 0;

setInterval(() => {
  curr += (parseInt(input.value, 10) || 0);
  img.style.transform = `rotate(${curr}deg)`;
}, 1000);

.rotater {
  transition: transform 200ms ease;
}

<div><label for="amount">How much to rotate by</label> <input type="number" id="amount" value="10" step="10" min="10" max="90"></div>
<div>
  <img id="image" class="rotater" src="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be">
</div>