Question

您好我还是CSS，HTML和JS的初学者。我试图为剩下的财产做一个过渡缓和，因为我为我未来的目的做了一个动画画廊。我在浏览器中对它进行了测试，图像在哪里发生了变化但过渡没有发生。

这是我的“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();
});

我做错了吗？或者我应该使用另一个tehnique。如果你想测试它，你可以使用你想要的任何图像和你想要的数量（只保留js的“galery_comp”类）任何服装都是apreciated！

Answer 1

您应该将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;
}

CSS缓出/轻松过渡动画

1 个答案: