极客观点
项目管理
HarmonyOS
上图所示，默认显示固定行数，点击箭头显示全部内容，
目前是使用 -webkit-line-clamp 实现，但是过渡的时候没有动画效果，大家有什么别的方法吗？
补充：
需做的时一个列表样式的，由于内容不实固定的，是后台传入的，有些内容多，有些内容少，所以没有办法设置一个固定的高度。
网页文字默认显示固定行数，点击按钮显示全部怎么实现？
html5阅读 13.8k
实现的方式不少，可以用css动画，也可以用jquery等，个人思路：
先设置一个固定高度，点击箭头，换个高度即可，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.h{
transition: all 3s ease;
overflow: hidden;
}
.h20{
height: 20px;
}
.h20:hover{
height: 400px;
}
</style>
</head>
<body>
<div class="h h20">撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡撒独立开发时间考虑的发家史丢了饭卡就是；地方；啊技术的；浪费了坷拉三季稻立法精神动力；发就送大礼饭卡机是的立法技术的立法技术；上的风景阿斯兰的饭卡上；两地分居啊实力非凡</div>
</body>
</html>
建议使用css的transation, 设置div点击前后的height, 与展开动画，动画时间，就可以简单实现，完全不用js，js控制dom元素做动画是非常低效的，动画效果不应该考虑用它实现
我的看法还是简单的外部一个div为.outer设置
overflow:hidden:
固定好line-height和height
内部设置一个div为.inner
获取.inner的高度
点击按钮时让外部div高度animate到内部div的高度就好了
html:
<div class="outer">
<div class="inner">Promises/A+规范首先要明白的的几个词:解决(fulfill):我们现在也常说是resolve,表示promise成功时的一系列操作 拒绝(reject):表示promise失败时的一系列操作 终值(eventual value):promise被fulfill时传递给解决回调的值,由于promise是一次性的,所以当该值被传递时,也就是promise的结束,所以称为终值,当然有时我们简称为值(value) 拒因(reason):被拒绝时传递给reject回调的值 异常(exception):throw抛出的值 Promise:拥有then方法的对象或函数,行为符合本规范 thenable:定义了then方法的对象或函数,拥有then方法 promise很简单,就和我们上一篇那样,作为一个三个状态的有限状态机那样,详细的规定嘛 传送门:图灵社区Promises/A+规范 http://www.ituring.com.cn/article/66566 then方法的定义:接受onFulfilled,onRejected两个函数(不是函数就不认你!),这个就是我们上篇提到的then(undefined,onRejected)兼容catch()的原因啦
</div>
</div>css
.outer{
overflow:hidden;
width:300px;
height:120px;
font-size:12px;
line-height:12px;
background:#ccc;
}javascripte
var inner = $(".inner");
var outer = $(".outer");
console.log("inner-height"+inner.css("height"));
outer.on("click",function(){
outer.animate({height:inner.css("height")});
})简单的写了下
新手上路，请多包涵
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin: 0;padding:0;list-style: none;}
body{background: #333;font-size: 14px;font-family:"微软雅黑"}
a{color: #333;text-decoration: none;}
.hidden{ display: none;}
.lanren{width: 800px;height: auto;margin:0 auto;overflow: hidden;text-align: left;background:#fff;padding:5px;}
.lanren ul.list{overflow: hidden;}
.lanren ul.list li{width: 150px;height: 150px;margin:5px;float: left;overflow: hidden;}
.lanren ul.list li img{width: 100%;height: 100%;}
.lanren ul.list p{text-align: center;padding: 10px;}
.lanren .more{overflow: hidden;padding:10px;text-align: center;}
.lanren .more a{display: block;width: 80px;padding:8px 0;color:#fff;margin:0 auto;background:#333;text-align:center;border-radius:3px;}
.lanren .more a:hover{text-decoration: none;background: red;color: #fff;}
</style></head>
<body>
<!--代码部分begin-->
<div class="lanren">
<div class="hidden">
<li><img src="images/1px.gif" realSrc="images/lanren01.jpg" width="150" height="150" />33</li>
<li><img src="images/1px.gif" realSrc="images/lanren02.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren03.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren04.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren05.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren06.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren07.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren08.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren09.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren10.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren11.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren12.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren13.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren14.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren15.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren16.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren17.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren18.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren19.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren20.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren21.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren22.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren23.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren24.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren25.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren26.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren27.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren28.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren29.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren30.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren31.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren32.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren33.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren34.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren35.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren36.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren37.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren38.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren39.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren40.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren41.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren42.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren43.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren44.jpg" width="150" height="150" /></li>
<li><img src="images/1px.gif" realSrc="images/lanren45.jpg" width="150" height="150" /></li>
</div>
<ul class="list">数据加载中，请稍后...</ul>
<div class="more"><a href="javascript:;" onClick="lanren.loadMore();">加载更多</a></div>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
var _content = []; //临时存储li循环内容
var lanren = {
_default:10, //默认显示图片个数
_loading:5, //每次点击按钮后加载的个数
init:function(){
var lis = $(".lanren .hidden li");
$(".lanren ul.list").html("");
for(var n=0;n<lanren._default;n++){
lis.eq(n).appendTo(".lanren ul.list");
}
$(".lanren ul.list img").each(function(){
$(this).attr('src',$(this).attr('realSrc'));
})
for(var i=lanren._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
$(".lanren .hidden").html("");
},
loadMore:function(){
var mLis = $(".lanren ul.list li").length;
for(var i =0;i<lanren._loading;i++){
var target = _content.shift();
if(!target){
$('.lanren .more').html("<p>全部加载完毕...</p>");
break;
}
$(".lanren ul.list").append(target);
$(".lanren ul.list img").eq(mLis+i).each(function(){
$(this).attr('src',$(this).attr('realSrc'));
});
}
}
}
lanren.init();
</script>
<!--代码部分end--></body>
</html>
你试一下用transition过渡。
html:
<div class="div">
<label for="checkbox" class="array"></label>
<input type="checkbox" id="checkbox" >
<p>
阿萨德路附近的律师费费了圣诞节快废了附近的搜救分类晒单飞机离开圣诞节傅雷家书老地方水电费老地方将诶就发了啥地方苏打绿分开就发了啥地方阿萨德路附近的律师费费了圣诞节快废了附近的搜救分类晒单飞机离开圣诞节傅雷家书老地方水电费老地方将诶就发了啥地方苏打绿分开就发了啥地方阿萨德路附近的律师费费了圣诞节快废了附近的搜救分类晒单飞机离开圣诞节傅雷家书老地方水电费老地方将诶就发了啥地方苏打绿分开就发了啥地方
</p>
</div>css:
.div{
line-height:25px;
width:200px;
position:relative;
background:#f00;
padding-bottom:10px;
}
.array{
position:absolute;
bottom:10px;
left:0;
right:0;
margin:auto;
width:10px;
height:10px;
border:2px solid #000;
border-left:0;
border-top:0;
transform:rotate(45deg);
}
.div input{
display:none;
}
.div p{
height:100px;
overflow:hidden;
transition: all 2s;
-webkit-transition: all 2s;
}
.div input:checked+p{
height:450px;
}
我昨天刚写了这种，你设置一个高度，然后overflow：hidden，动画的话就用jquery的$('.类名').animate({height:"展开后的高度"},1000);
<p style="height: 102px;overflow: hidden;"></p>
点击展开按钮
document.getElementsByTagName('p')[0].style.overflow = "";
document.getElementsByTagName('p')[0].style.height = "auto";
这只是一种方式吧,样式和效果什么的可以再调的.
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
设置固定高，overflow:hidden，点击时候逐渐增加高度到全部显示，不知道行不行