如何用javascript触发css翻译动画答案

【问题标题】：How to trigger css translate animation with javascript如何用javascript触发css翻译动画
【发布时间】：2018-07-17 08:06:37
【问题描述】：

我正在尝试创建一个手动幻灯片，根据按下哪个按钮来显示四个图像的左侧或右侧的动画，从而发现四个新图像并隐藏旧图像。除了我不知道如何为过渡设置动画外，所有逻辑都有效。我在我的 javascript 文件中尝试了各种东西，例如album_covers[n].style.transition = "translate 1.0s linear 0s";（正如您将在下面的代码中看到的那样，'album_covers' 是一个数组，由 html 中的 'album-cover' 类选择的所有图像组成）。我不确定我尝试做事的方式是否可行，或者我是否必须求助于其他技术，例如关键帧。对 CSS/Javascript 新手有何见解？

HTML

<html>
  <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">    
  </head>
  <body>
    <div class="image-container">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/008/786/475/cover-2153.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover"src="https://images.8tracks.com/cover/i/009/883/162/tumblr_nra20qoAw41qzp1j8o2_1280-9783.gif?rect=59,0,432,432&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/564/192/7329ec2b80938b862b24175cf8445ea8-1868.jpg?rect=0,73,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/732/575/7841098526_510abd2ec7_o-7993.jpg?rect=92,0,1536,1536&q=98&fm=jpg&fit=max&w=1024&h=1024">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/000/655/115/46099_10151436554292625_1248862229_n-5573.jpg?rect=133,0,633,633&q=98&fm=jpg&fit=max"> 
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/077/003/tumblr_o77rkhnJGF1vutacho1_500-6413.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">  
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/919/152/25820d4a20ddca732d0220000b0fa723-8821.jpg?rect=120,0,398,398&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/001/693/941/Sherlock_S03E03_1080p_kissthemgoodbye_net_5000-3819.jpg?rect=0,0,1072,1072&q=98&fm=jpg&fit=max&w=1024&h=1024">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/009/149/601/405867_2930131703040_1104257610_n-956.jpg?rect=159,0,641,641&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/158/250/Angbang-smut_copy-7358.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/341/098/Kylux_copy-again-4632.png?rect=0,0,500,500&q=98&fm=jpg&fit=max">
      <img class = "album-cover" src="https://images.8tracks.com/cover/i/010/279/809/0aa2af1665e66735f5a9b50e16051274-4133.jpg?rect=0,0,640,640&q=98&fm=jpg&fit=max">
    </div>
    <button id="left-button">
      <i class="fa fa-chevron-left"></i>
    </button>
    <button id="right-button">
      <i class="fa fa-chevron-right"></i>
    </button>
  </body>
</html>

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

.image-container {
  height: 300px;
  width: 1260px;
  margin: 50px 40px;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

.image-container img {
  height: 100%;
  margin-left:5px;
  margin-right: 5px;
  transform: translate(0%, 0px);
}

Javascript

var counter = 0;
var max_album_sections = 2;
var album_covers = document.getElementsByClassName("album-cover");
console.log(album_covers);
document.getElementById("left-button").addEventListener("click", function() {navGallery(-1)});
document.getElementById("right-button").addEventListener("click", function() {navGallery(1)});


function translateImage() {
  var amount = String(-418*counter) + "%";
  for(var n = 0; n < album_covers.length; n++) {
    album_covers[n].style.transition = "translate 1.0s linear 0s";
    album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");
  }
}

function navGallery(increment) {
  if(counter < max_album_sections && counter > 0) {
    counter = counter + increment;
    translateImage();
  }
  if(counter == max_album_sections && increment < 0) {
    counter = counter + increment;
    translateImage();
  }
  if(counter == 0 && increment > 0) {
    counter = counter + increment;
    translateImage();
  }
}

【问题讨论】：

标签： javascript css css-transitions slideshow transition

【解决方案1】：

有两点需要注意。

首先，您需要转换 transform 属性，而不是 translate 值。

其次，更重要的是，通过在下一行使用setAttribute，您将覆盖style 属性具有的任何先前值。这包括您刚刚设置的过渡。

这就是为什么一般不推荐使用setAttribute 方法的原因，特别是style 属性。

所以用这些行修复javascript：

album_covers[n].style.transition = "transform 1.0s linear 0s";
album_covers[n].style.transform = "translateX(" + amount + ")";

而不是

album_covers[n].style.transition = "translate 1.0s linear 0s";
album_covers[n].setAttribute("style", "transform: translate(" + amount + ", 0px);");

或者，您可以只删除您尝试应用动画的 javascript 行，然后添加 CSS 规则

.album-cover{
  transition:transform 1s linear;
}

【讨论】：

将 javascript 更改为 album_covers[n].style.transition = "transform 1.0s linear 0s"; 似乎无法达到预期的效果，尽管添加 .album-cover{ transition:transform 1s linear; } 可以。知道为什么会这样吗？
@Shadow43375 我认为这是因为您在下一行使用了setAttribute，它删除了“样式”属性的先前值。我将编辑我的答案以包含它
你是对的。正确的方法是将整个内容包含在一个 javascript 行中：album_covers[n].setAttribute("style", "transition:transform 1s ease; transform: translate(" + amount + ", 0px);"); }
@Shadow43375 你可以这样做，但这也不是正确的方法。 setAttribute 不是样式属性的推荐方法，正是因为所讨论的行为。所以最好使用style.transition 和style.transform。我也编辑了答案以表明这一点。

【解决方案2】：

你要设置转换的css属性是transform，而不是translate

album_covers[n].style.transition = "transform 1.0s linear 0s";

【讨论】：