CSS 缓出/缓入过渡动画答案

【问题标题】：CSS ease-out/ ease-in transition animationCSS 缓出/缓入过渡动画
【发布时间】：2017-09-02 00:03:44
【问题描述】：

您好，我还是 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();
});

我做错了吗？或者我应该使用另一种技术。如果你想测试它，你可以使用你想要的任何图像以及你想要多少（只保留 js 的“galery_comp”类）任何答案都非常感谢！

【问题讨论】：

stackoverflow.com/a/45267732/5068056
为简单起见，我建议您使用可以满足您需求的插件。除非你想炫耀你的 JavaScript 技能。 :)
那你建议什么插件？
你认识一个吗？

标签： javascript html css

【解决方案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;
}

【讨论】：

感谢您的帮助，我看到不透明度有效，但左边没有，我认为我在算法检查中遇到问题。