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，反之亦然。

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

＆＃13;

$('.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;
              }
          });

＆＃13;

.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;
  }

＆＃13;

<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>

＆＃13;

点击进入和退出LI

1 个答案: