按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过渡 。 这将使您在转换之间轻松自如。 将其与应该使用的setInterval ，以获取转换每次迭代所需的数量。

例如，下面的代码片段将在200ms （毫秒）的过程中ease当前transform与目标transform之间的transform 。

 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> 

Answer 2

CSS过渡允许您在给定的时间内平稳地更改属性值（从一个值更改为另一个值）。

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

像这样：

 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>