代码之家 › 专栏 › 技术社区 › Shadow43375

如何使用javascript触发css翻译动画

transition slideshow css-transitions css javascript

Shadow43375 · 技术社区 · 7 年前

我正在尝试创建一个手动幻灯片,根据按下的按钮来设置四幅图像左右平移的动画,以显示四幅新图像并隐藏旧图像。所有的逻辑都是有效的,只是我不知道如何设置过渡动画。我在javascript文件中尝试了各种方法,例如 album_covers[n].style.transition = "translate 1.0s linear 0s"; (正如您将在下面的代码中看到的那样,“album\u cover”是一个数组,由“album cover”类从html中选择的所有图像组成)。我不确定我尝试的方式是否可行,或者我是否必须求助于其他技术,例如关键帧。对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();
  }
}

2 回复 | 直到 7 年前

Facundo Corradini 7 年前

有两件事需要注意。

首先,您需要转换 transform 属性,而不是 translate 价值

其次,更重要的是,通过使用 setAttribute 在下一行中,您将覆盖 style 属性had。这包括您刚刚设置的过渡。

这就是为什么 setAttribute属性 通常不建议使用该方法,特别是对于 风格 属性

因此,请使用以下行修复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;
}

dshukertjr 7 年前

要设置transition的css属性是transform,而不是translate

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