我创建了一个列表,并使用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>
答案 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>