javascript - 动画 toggleClass Display None/Block

Question

我创建了一个列表并使用 CSS 制作，因此默认情况下只显示前三个元素。当用户单击阅读更多链接时，它将显示剩余的元素。

我正在尝试为加载额外列表项的部分设置动画，但似乎无法找到一种方法来实现它。

我尝试了各种 CSS 和 JS 解决方案，但没有任何效果。有没有人知道如何让它发挥作用？任何帮助将不胜感激!

代码笔:https://codepen.io/anon/pen/ZjEMoP

$(document).ready(function() {
  $('#list-list #list-more').on('click', function(e) {
    e.preventDefault();
    $(this).closest('#list-list').toggleClass('open');
    $('#list-more').hide();
    $('#list-less').show();
  });
  $('#list-list #list-less').on('click', function(e) {
    e.preventDefault();
    $(this).closest('#list-list').toggleClass('open');
    $('#list-less').hide();
    $('#list-more').show();
  });
});

body {
  font-family: arial;
}

#list-list ul {
  padding: 0 0 0 15px;
  margin: 0 0 5px 0;
}

#list-list li {
  line-height: 25px;
}

#list-list li:nth-child(n+4) {
  display: none;
}

#list-list.open li:nth-child(n+4) {
  display: list-item;
}

#list-more,
#list-less {
  color: #00b8e4;
  margin: 0 0 0 15px;
  cursor: pointer;
}

#list-more:hover,
#list-less:hover {
  color: #0084bf;
}

#list-less {
  display: none;
}

#list-more:after {
  content: "";
  margin: 0 0 3px 5px;
  display: inline-block;
  border: 5px solid transparent;
  border-top: 5px solid #000;
  border-bottom: 0 none;
}

#list-less:after {
  content: "";
  margin: 0 0 3px 5px;
  display: inline-block;
  border: 5px solid transparent;
  border-top: 0 none;
  border-bottom: 5px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="list-list">
  <ul>
    <li>In hac habitasse platea dictumst. Morbi fini</li>
    <li>l sagittis nulla. Donec tempor ex augue, eget convallis est vulputat</li>
    <li>ies dui ut placerat. Quisque blandit ullamcorper sem, ut conseq</li>
    <li>volutpat ultrices nunc. Nullam mattis velit eros, non rhoncus nibh laoreet varius.</li>
    <li>ui ut placerat. Quisque blandit ullamcorper sem, ut consequat ante tristique id. Nam nisl ligula, rhoncus quis blandit vel, varius hendrerit libero. Nullam</li>
    <li>s arcu a aliquam bibendum. In id odio odio. Ut ac gravida erat.</li>
    <li>onvallis lectus fringilla non. Pellentesque velit elit, pellentesque at tincidunt pellentesque, bibendum nec sap</li>
    <li>ulus mus. Nullam nec vehicula justo. Ut vel nibh vulputate ante tincid</li>
  </ul>
  <span id="list-more">Read More</span>
  <span id="list-less">Read Less</span>
</div>

Answer 1

您尝试过使用关键帧吗？此示例将在文本中淡出。

https://codepen.io/anon/pen/vaYVmd

#list-list.open li:nth-child(n+4) {
  display: list-item;
  animation-name: fade-in;
  animation-duration: 1s;
}


@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}