CSS緩解/易插入轉換動畫

-1

嗨我還是初學者在CSS，html和JS。我試圖爲剩下的財產做一個過渡緩解，因爲我爲未來的目的製作了一部動畫歌曲。我在瀏覽器中對它進行了測試，圖片發生了變化，但沒有發生過渡。CSS緩解/易插入轉換動畫

這裏是我的「的index.html」：

<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
    <body> 
     <div class="galery"> 
      <img class="galery_comp" src="img/leaf.jpg"> 
      <img class="galery_comp" src="img/spital.jpg"> 
      <img class="galery_comp" src="img/nature.jpg"> 
      <img class="galery_comp" src="img/forest.jpg"> 
     </div> 
     <br> 
     <button type="button" id="back"><-- Back</button> 
     <button type="button" id="next">Next --></button> 
     <script src="Galery.js"></script> 
     <script src="sketch.js"></script> 
    </body> 
</html>

這裏是我的「style.css文件」：

div.galery{ 
    display: flex; 
    transition: left 0.4s ease-out; /* This is where i tried */ 
} 

img{ 
    width: 600; 
    height: 500; 
    display: none; 
}

這裏是我的「Galery.js」：

function Galery(){ 
    this.imgs = document.getElementsByClassName('galery_comp'); 
    this.currentImage = 0; 
    this.offSet = 0; 
    var hide = false; 

    this.sleep = function(milliseconds) { 
     var start = new Date().getTime(); 
     for (var i = 0; i < 1e7; i++) { 
      if ((new Date().getTime() - start) > milliseconds){ 
      break; 
      } 
    } 
} 

    this.init = function(){ 
     this.imgs[0].style.display = "block" 
    } 

    this.next = function(){ 
     this.currentImage++; 
     if (this.currentImage >= this.imgs.length) 
     { 
      this.currentImage = 0; 
      for (var i = 0; i < this.imgs.length; i++){ 
       this.imgs[i].style.left = 0; 
       this.imgs[i].style.display = "none"; 
      } 
     } 
     this.imgs[this.currentImage].style.display = "inline"; 
     this.offSet=0; 
    } 

    this.slideNext = function(){ 
     this.imgs[this.currentImage].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width) - this.offSet; 
     this.imgs[this.currentImage].style.display = "none"; 
     this.offSet = 10; 
     this.next(); 
    } 

    this.slideBack = function(){ 
     if (this.currentImage === 0){ 
      this.currentImage = this.imgs.length; 
      for (var i = 0; i < this.imgs.length; i++){ 
       this.imgs[i].style.left = -parseInt(window.getComputedStyle(this.imgs[0], null).width); 
       this.imgs[i].style.display = "none"; 
      } 
     } 
     this.currentImage--; 
     this.imgs[this.currentImage].style.display = "inline"; 


     this.imgs[this.currentImage].style.left = 0; 
     if (this.currentImage + 1 < this.imgs.length) 
      this.imgs[this.currentImage + 1].style.display = "none"; 
    }

}

最後這裏是我的sketch.js：

var galery = new Galery(); 
galery.init(); 

document.getElementById('next').addEventListener("click", function(){ 
    galery.slideNext(); 
}); 

document.getElementById('back').addEventListener("click", function(){ 
    galery.slideBack(); 
});

我做錯了什麼？或者我應該使用另一個技巧。如果你想測試它，你可以使用任何你想要的圖像和你想要的數量（只保留js的「galery_comp」類）任何answear都可以！

來源

2017-09-01 cristi craciun

https://stackoverflow.com/a/45267732/5068056 – aghilpro

爲了簡單起見，我建議你也許使用一個插件，做你所需要的。除非你想炫耀你的JavaScript技能。 :) – Bird

那麼你建議什麼插件？ –

您應該將transition添加到您的img。

你也設置（在你的js）display到none。所以你基本上可以看到轉換之前刪除img。 display也是一個不可轉換屬性

相反的顯示，請嘗試使用opacity並將其設置爲任意0 or 1（取決於無論您想要顯示與否）

，那麼你還可以添加你的不透明度過渡（也許不同的定時），並有不錯的效果）

img{ 
    width: 600; 
    height: 500; 
    opacity: 0; 
    transition: left 0.4s ease-out, opacity 0.3s ease-out; 
}

來源

2017-09-01 16:03:44 rebecca

感謝您的幫助，我看到不透明的工作，但左側沒有，我想我有在alghorithm病檢查看到的問題。 –

CSS緩解/易插入轉換動畫

回答

相關問題