我已经设置了一个在某些文本中带有text-overflow: ellipsis
的white-space: nowrap
,当用户悬停时,它应该将空格值更改为正常。悬停代码工作正常,但我无法使过渡工作。
这是代码笔链接: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 到正常的中间值,因为没有从 heright:0 到 auto,或从 display:none 到阻止的中间值。
使用 CSS 实现此目的的唯一方法是对元素使用 max-height,并在悬停时进行过渡。然而,空白/省略号本身必须去 => 用与父元素具有相同背景颜色的伪元素替换它们:
.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 */
}
笨拙,可改进,但只使用 CSS。
检查的CodePen示例
您需要固定 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%;
}
}
}
}
}
}
问题是因为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
和片段:
.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>
我认为你不能只用css来动画化。要对高度进行动画处理,您需要显式设置它。我会尝试使用 js 获取实际高度,限制高度,然后在悬停时以 js 为单位应用高度。
你可以用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,我为此道歉。
可以通过height: auto
来实现,但CSS transition
所需的高度固定值。但是你可以通过使用jQuery来解决这个问题。我只写一个基本的mouseenter
,mouseleave
方法和一些逻辑来获取内容展开/折叠高度。所有提到的更改都应用于下面的代码,您还可以查看工作小提琴。我希望它能帮助你。谢谢
工作小提琴示例 - https://jsfiddle.net/creative_sid5/bgpus3q6/42/
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>
我这里有一个使用 React 和 CSS 的例子,但你可以在普通 JS 或您选择的框架中实现相同的目标。这里的关键是测量元素扩展(隐藏,克隆(高度和折叠高度,然后通过CSS过渡处理动画。
import React, { useState } from "react";
const ShowMore = ({ text }) => {
const [isOpen, toggle] = useState(false);
const [
isOnGoingCollapseTransition,
setisOnGoingCollapseTransition
] = useState(false);
const [initialHeight, setInitialHeight] = useState(0);
const ref = React.useRef();
const measureRef = React.useRef();
React.useLayoutEffect(() => {
setInitialHeight(ref.current.getBoundingClientRect().height);
}, []);
const onTransitionEnd = () => {
if (isOpen) {
setisOnGoingCollapseTransition(true);
} else {
setisOnGoingCollapseTransition(false);
}
};
return (
<div className="relative">
<div className="absolute hidden" ref={measureRef}>
{text}
</div>
<div
onTransitionEnd={onTransitionEnd}
className="overflow-hidden transition"
style={{
height: isOpen
? measureRef.current.getBoundingClientRect().height
: initialHeight
}}
>
<div
ref={ref}
className={
!isOpen && !isOnGoingCollapseTransition ? "overflow-ellipsis" : ""
}
>
{text}
</div>
</div>
<span className="text-blue" onClick={() => toggle(open => !open)}>
{isOpen ? <span>show less</span> : <span>show more</span>}
</span>
</div>
);
};
export default ShowMore;
.CSS:
.relative{
position: relative;
}
.absolute{
position: absolute;
}
.overflow-ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.overflow-hidden{
overflow: hidden;
}
.text-blue{
color: blue;
cursor: pointer;
}
.transition{
transition: 225ms height linear;
}
.hidden{
transform: translate(1000px);
}
查看此工作示例省略号折叠过渡