javascript - 单击时使 LI 淡入淡出

Question

我将三个单独的段落存储在三个列表项中，并带有继续阅读图像。我只想显示第一个列表项。当您单击图像时，它应该淡入淡出并在淡入淡出过渡中显示下一个列表项。一旦你到达第三个，它应该在你点击时淡出到第一个。

我的问题是我得到了奇怪的间距 - 第一个列表项消失但仍然占用了一段时间的空间并导致列表中的下一个淡入淡出的元素在前一个 LI 最终消失后跳起来。

不透明度与淡入淡出完美配合，但显示会折叠淡出的 li，以便列表项随着淡入淡出相互堆叠。

我可以使用 UL 相对位置来定位列表项的绝对位置，但我不喜欢该方法继承缺乏响应性。如果可以的话，我想避免它。

到目前为止的代码-

  <ul class="copy-box">
        <li class="first active"><p>first</p></li>
        <li class="second"><p>second</p></li>
        <li class="last"><p>third</p></li>
  </ul>
  <a class="next-btn"><img src="#"></a>


  .active {
        opacity:1 !important;
        transition: .5s;
    display: block !important;
  }
  .copy-box li {
    opacity:0;
    list-style: none;
      display: none;
  }
  .copy-box li:first {
      display: inline;
  }

查询

  `$('.next-btn').click(function(){         
            if ( $("li.active").hasClass('last') ) {
                $('li.active').removeClass('active');
                $('.copy-box li').first('li').addClass('active');
                return false;
            } 
              else {
                $("li.active").removeClass('active').next().addClass('active');
                  return false;
              }
          })`

Answer 1

首先要记住的是 - display 属性不可设置动画，因此您不能指望它能与动画/过渡一起使用。

如需淡入淡出效果，只需将不透明度从 0 更改为 1，反之亦然。

您现在会遇到的一个问题是，所有段落都在各自的位置淡入/淡出，并且即使它们已经淡出，也会继续占用空间。您通常希望它们在同一位置淡入/淡出，即相互重叠。为此，您需要将它们的位置设置为绝对位置并根据需要调整位置。

$('.next-btn').click(function(){         
            if ( $("li.active").hasClass('last') ) {
                $('li.active').removeClass('active');
                $('.copy-box li').first('li').addClass('active');
                return false;
            } 
              else {
                $("li.active").removeClass('active').next().addClass('active');
                  return false;
              }
          });

.copy-box
  {
    position: relative;
    height: 50px;
  }
  .copy-box li {
    opacity:0;
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
  }
  .copy-box li.active {
        opacity:1;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="copy-box">
        <li class="first active"><p>first</p></li>
        <li class="second"><p>second</p></li>
        <li class="last"><p>third</p></li>
  </ul>
  <a class="next-btn"><img src="#"></a>