点击时淡入淡出 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;
  }

Jquery

  `$('.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>