对toggleClass进行动画显示无/块

时间:2018-07-10 18:05:44

标签: javascript jquery html css

我创建了一个列表,并使用CSS制作了一个列表,因此默认情况下仅显示前三个项目。当用户单击“阅读更多”链接时,它将显示其余项目。

我正在尝试为加载其他列表项的部分设置动画,但是似乎无法找出一种实现方法。

我尝试了各种CSS和JS解决方案,但没有任何效果。是否有人对如何使它起作用有想法?任何帮助将不胜感激!

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

4 个答案:

答案 0 :(得分:2)

您是否尝试过使用关键帧?本示例将在文本中淡化。

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

答案 1 :(得分:1)

您可以将JavaScript更改为此:

$( document ).ready(function() {
    $('#list-list #list-more').on('click', function(e) {
        e.preventDefault();
        $(this).closest('#list-list').toggleClass('open');
    $('#list-list li:nth-child(n+4)').fadeIn();
        $('#list-more').hide();
        $('#list-less').show();
    });
    $('#list-list #list-less').on('click', function(e) {
        e.preventDefault();
        $(this).closest('#list-list').toggleClass('open');
    $('#list-list li:nth-child(n+4)').fadeOut();
        $('#list-less').hide();
        $('#list-more').show();
    });
});

在这种情况下,您也不再需要打开切换。如果您想使用CSS动画来做,那会有些棘手,因为根据我的经验,在无显示/无块之间设置动画效果真的不太好。

答案 2 :(得分:1)

您可以使用animation属性来实现,一些简单的解决方案是对不透明度进行动画处理,请参见下面的代码:

$( 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) {
  opacity: 0;
  transform: translateY(-15px);
  animation: displayList 500ms ease-in;
  animation-fill-mode: forwards;
}

@keyframes displayList {
  0% {
    opacity :0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
  
}

#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/1.7.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>

答案 3 :(得分:1)

您需要这样的东西:

$(document).ready(function() {
  var listHeight = $('#list-list').outerHeight(),
    fontSize = $('#list-list').css('font-size').replace('px', ''),
    lineHeight = Math.floor(parseInt(fontSize * 1.5)),
    lines = Math.floor(listHeight / lineHeight),
    closedLines = 4,
    margin = 20;

  $('#list-list').css("height", (closedLines * lineHeight) + "px");

  $('.open-list').on('click', function(e) {
    e.preventDefault();
    $(this).parent('#list-list').css("height", (lineHeight * lines + margin) + "px");
    $(this).fadeOut();
    $('.close-list').fadeIn();
  });
  $('.close-list').on('click', function(e) {
    e.preventDefault();
    $(this).parent('#list-list').css("height", (closedLines * lineHeight + margin) + "px");
    $(this).fadeOut();
    $('.open-list').fadeIn();
  });
});
body {
  font-family: arial;
}

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

#list-list {
  position: relative;
  overflow: hidden;
  transition: height 1s ease;
}

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

#list-list>button {
  color: #00b8e4;
  position: absolute;
  bottom: 0;
  left: 0;
}

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

#list-list>.close-list {
  display: none;
}

#list-list>.close-list: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>
  <button class="open-list">Read More</button>
  <button class="close-list">Read Less</button>
</div>