我在某些文本中设置了white-space: nowrap
和text-overflow: ellipsis
,当用户盘旋时,它应该将白色空间值更改为正常。悬停代码工作正常,但我无法使转换工作。
这是CodePen链接:https://codepen.io/anon/pen/qwYoyR
.App p {
margin-bottom: 3px;
}
.App .bg-row {
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1a3;
padding: 20px;
border-radius: 5px;
}
.App .bg-row .repositorios {
transition: all 0.2s ease;
margin-bottom: 20px;
}
.App .bg-row .repositorios:hover .repo-content {
background-color: #d2d6d8;
transition: 500ms ease-in-out;
}
.App .bg-row .repositorios .repo-image {
width: 100%;
height: auto;
box-shadow: 0px 0px 5px #bdc3c7;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.App .bg-row .repositorios .repo-content {
padding: 10px;
transition: 500ms ease-in-out;
overflow: hidden;
box-shadow: 0px 0px 5px #bdc3c7;
transition: 500ms ease-in-out;
background-color: #ecf0f1;
}
.App .bg-row .repositorios .repo-content p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.App .bg-row .repositorios .repo-content .read-more {
transition: 500ms ease-in-out;
cursor: pointer;
}
.App .bg-row .repositorios .repo-content .read-more:hover {
white-space: normal;
transition: 500ms ease-in-out;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container App">
<div class="row bg-row">
<div class="col-sm-6 col-md-4 col-lg-3 repositorios">
<div class="repo-content">
<p class="read-more">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
这些不是可以转换的属性。
white-space: nowrap;
text-overflow: ellipsis;
为了转换到一个属性到另一个属性,CSS需要中间值。从nowrap到normal,没有中间值,因为没有来自heright的中间值:0到auto,或者从display:none到block。
使用CSS实现此目的的唯一方法是对元素使用max-height,并在悬停时进行转换。然而,白色空间/省略号本身必须=>用一个伪元素替换它们,使用与父元素相同的backgroundColor:
.x {
position: relative;
overflow: hidden;
max-height: 20px; /* set this to the height your first row would be */
background-color: red; /* you can change this, ofc */
transition: max-height .5s; /* the duration of the transition */
}
.x:after {
content: '...';
position: absolute;
top: 0; right: 0;
height: 1.5em; /* positioning it in line with the text - hacky */
padding: 0 .2em;
background-color: red; /* keep the same as parent - it cannot be transparent unfortunately */
opacity: 1;
transition: opacity 0s .5s; /* will delay the appearance of the '...' until the expanding transition has finished */
}
.x:hover {
max-height: 1000px; /* can be lower to create smoother response time */
}
.x:hover::after {
opacity: 0;
transition: opacity 0s 0s; /* will apply the appearance of the '...' when hovered */
}
Hacky,可以改进,但只使用CSS。
我不认为你可以用css动画这个。要为高度设置动画,您需要明确设置它。我试着用js获得真正的高度,限制高度,然后在悬停时在js中应用高度。
你需要固定col-sm-6 col-md-4 col-lg-3 =“100%”的宽度,这样你就可以得到你的答案
<div class="container App">
<div class="row bg-row">
<div class="repositorios">
<div class="repo-content">
<p class="read-more">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
应用此CSS它将适合您
.App {
p {
margin-bottom: 3px;
}
.bg-row {
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1a3;
padding: 20px;
border-radius: 5px;
.repositorios {
transition: all 0.2s ease;
margin-bottom: 20px;
&:hover {
.repo-content {
background-color: #d2d6d8;
transition: 500ms ease-in-out;
}
}
.repo-image {
width: 100%;
height: auto;
box-shadow: 0px 0px 5px #bdc3c7;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.repo-content {
padding: 10px;
transition: 500ms ease-in-out;
overflow: hidden;
box-shadow: 0px 0px 5px #bdc3c7;
transition: 300ms ease-in-out;
background-color: #ecf0f1;
p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
}
.read-more {
transition: 500ms ease-in-out;
cursor: pointer;
&:hover {
white-space: normal;
transition: 300ms ease-in-out;
width: 100%;
}
}
}
}
}
}
或者你可以像这个codepen一样使用Jquery
$('.repo-content').hover(function(e){
$(this).animate({height: '100%'}, 100);
$('.bg-row.row').animate({height: '100%'}, 500);
},function(){
$(this).animate({height: '50px'}, 500);
});
.App p {
margin-bottom: 3px;
}
.App .bg-row {
transition: 500ms ease-in-out;
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1 a3;
padding: 20px;
z-index:99;
height:100px;
border-radius: 5px;
}
.App .bg-row .repositorios {
transition: all 0.2s ease;
margin-bottom: 20px;
}
.App .bg-row .repositorios:hover .repo-content {
background-color: #d2d6d8;
transition: 500ms ease-in-out;
}
.App .bg-row .repositorios .repo-image {
width: 100%;
height: auto;
box-shadow: 0px 0px 5px #bdc3c7;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
.App .bg-row .repositorios .repo-content {
padding: 10px;
overflow: hidden;
height:50px;
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1;
}
.App .bg-row .repositorios .repo-content p {
text-overflow: ellipsis;
overflow: hidden;
}
.App .bg-row .repositorios .repo-content .read-more {
transition: 500ms ease-in-out;
cursor: pointer;
z-index:99;
}
.App .bg-row .repositorios .repo-content .read-more:hover {
transition: 500ms ease-in-out;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container App">
<div class="row bg-row">
<div class="col-sm-6 col-md-4 col-lg-3 repositorios">
<div class="repo-content">
<p class="read-more">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
顺便说一句,我不知道scss,所以我把你的scss转换为css,我为此道歉。
问题是因为white-space
不是一个有生命能力的财产。您可以为max-height
属性设置动画 - 请参阅updated codepen
及相关摘录:
.read-more {
transition: 500ms ease-in-out;
cursor: pointer;
max-height: 2em; /* added */
&:hover {
white-space: normal;
max-height: 100vh; /* added */
transition: 500ms ease-in-out;
}
}
但是当hover
关闭时,返回动画将无法正常工作,因为white-space: nowrap
将其废弃。
这是一个hacky解决方案,只使用max-height
进行转换,省略号由伪元素处理 - 请参阅下面的codepen
和snippet:
.App p {
margin-bottom: 3px;
}
.App .bg-row {
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1a3;
padding: 20px;
border-radius: 5px;
}
.App .bg-row .repositorios {
margin-bottom: 20px;
}
.App .bg-row .repositorios:hover .repo-content {
background-color: #d2d6d8;
}
.App .bg-row .repositorios:hover .repo-content .read-more {
transition: all 500ms ease-in-out;
white-space: normal;
max-height: 100vh;
}
.App .bg-row .repositorios:hover .repo-content .read-more:after {
transition: all 0.5s linear;
opacity: 0;
}
.App .bg-row .repositorios .repo-image {
width: 100%;
height: auto;
box-shadow: 0px 0px 5px #bdc3c7;
}
.App .bg-row .repositorios .repo-content {
padding: 10px;
overflow: hidden;
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1;
}
.App .bg-row .repositorios .repo-content p {
overflow: hidden;
}
.App .bg-row .repositorios .repo-content .read-more {
transition: all 500ms ease-in-out;
text-align: justify;
display: flex;
cursor: pointer;
max-height: 1.7em;
/* added */
}
.App .bg-row .repositorios .repo-content .read-more:after {
transition: all 0.5s linear;
content: '...';
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container App">
<div class="row bg-row">
<div class="col-sm-6 col-md-4 col-lg-3 repositorios">
<div class="repo-content">
<p class="read-more">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>
这可以通过height: auto
实现,但CSS transition
需要高度固定值。但是你可以使用jQuery来解决这个问题。我只是写了一个基本的mouseenter
,mouseleave
方法和一些逻辑来获得内容扩展/折叠高度。所有提到的更改都应用于下面的代码,您还可以查看工作小提琴。我希望它会帮助你。谢谢
var rm = $('.read-more');
var rmInitialHeight = 0;
var rmExpandedHeight = rm.outerHeight() + 'px';
rm.removeClass('active');
setTimeout(function(){
rmInitialHeight = rm.outerHeight() + 'px';
rm.height(rmInitialHeight);
}, 500)
rm.mouseenter(function() {
toggle(rmExpandedHeight);
});
rm.mouseleave(function() {
toggle(rmInitialHeight);
})
function toggle(h) {
rm.toggleClass('active').css('height', h);
}
.App p {
margin-bottom: 3px; }
.App .bg-row {
box-shadow: 0px 0px 5px #bdc3c7;
background-color: #ecf0f1a3;
padding: 20px;
border-radius: 5px; }
.App .bg-row .repositorios {
transition: all 0.2s ease;
margin-bottom: 20px; }
.App .bg-row .repositorios:hover .repo-content {
background-color: #d2d6d8;
transition: 500ms ease-in-out; }
.App .bg-row .repositorios .repo-image {
width: 100%;
height: auto;
box-shadow: 0px 0px 5px #bdc3c7;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease; }
.App .bg-row .repositorios .repo-content {
padding: 10px;
transition: 500ms ease-in-out;
overflow: hidden;
box-shadow: 0px 0px 5px #bdc3c7;
transition: 500ms ease-in-out;
background-color: #ecf0f1; }
.App .bg-row .repositorios .repo-content .read-more {
transition: 500ms ease-in-out;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden; }
.App .bg-row .repositorios .repo-content .active {
white-space: normal; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container App">
<div class="row bg-row">
<div class="col-sm-6 col-md-4 col-lg-3 repositorios">
<div class="repo-content">
<p class="read-more active">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
</div>
</div>