如何在悬停过渡期间使文本翻译/宽度增加
Posted
技术标签:
【中文标题】如何在悬停过渡期间使文本翻译/宽度增加【英文标题】:How to make text translate in / grow in width during hover transition 【发布时间】:2022-01-21 06:44:32 【问题描述】:我有一个.card
,它默认显示一个箭头。当用户将鼠标悬停在此 .card
上时,我希望“了解更多”文本从右侧滑入并随之移动箭头。
我试图把.card__footer
放到width: 0
;然后尝试在悬停时给它width
,但是,由于文本正在过渡,有时它会出现在两行,然后一旦过渡结束,就会变成一行。
除了使用width
,我怎样才能让这种效果在悬停时起作用?或者实现它的正确方法是什么?我目前的做法:
.cards
background: lightblue;
padding: 60px 0;
.container
max-width: 720px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
.card
background-color: white;
padding: 30px;
cursor: pointer;
transition: all 0.5s ease;
width: 250px;
.card:hover
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
.card:hover .card__arrow
transform: translateX(5px);
.card:hover .card__label
display: inline-block;
visibility: visible;
margin-right: 6px;
opacity: 1;
.card__header
margin-bottom: 30px;
.card__footer
display: flex;
justify-content: flex-start;
align-items: center;
.card__label
margin-right: 10px;
@media (hover: hover)
.card__label
margin: 0;
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
display: none;
<div class="cards">
<div class="container">
<div class="card">
<div class="card__header">
header
</div>
<div class="card__footer">
<span class="card__label">Learn more</span>
<img class="card__arrow" src="https://i.imgur.com/onjXVGW.png" />
</div>
</div>
<div class="card">
<div class="card__header">
header 2
</div>
<div class="card__footer">
<span class="card__label">Learn more</span>
<img class="card__arrow" src="https://i.imgur.com/onjXVGW.png" />
</div>
</div>
</div>
</div>
我追求的是什么:
.footer__arrow
默认显示左侧(就像在演示中一样)
.footer__label
默认隐藏
在.card
悬停时,我希望.footer__label
滑入,同时推动arrow
图像(以便它显示“了解更多”,然后在悬停时显示箭头。
目前我的.footer__label
刚刚出现,而我希望标签慢慢滑入并使其具有我的箭头被推到它旁边的效果。
【问题讨论】:
【参考方案1】:使用变换:您可以为标签和箭头引入一个包装器。然后在悬停时将其转换为右侧。并在页脚隐藏溢出:
:root
--arrow-icon-size: 1.5rem;
.cards
background: lightblue;
padding: 25px 0;
.container
max-width: 720px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
.card
background-color: white;
padding: 20px;
cursor: pointer;
transition: all 0.5s ease;
width: 250px;
border-radius: 1rem;
margin: 0 0.5rem;
.card__header
margin-bottom: 30px;
.card__footer
overflow: hidden;
.card__slide
display: flex;
justify-content: flex-start;
align-items: center;
width: fit-content;
transform: translateX(calc(-100% + var(--arrow-icon-size)));
transition: transform 1s ease-out;
.card__label
display: inline-block;
margin-right: 0.3rem;
.card__arrow
color: #FF7C81;
font-size: var(--arrow-icon-size);
@media (hover: hover)
.card:hover
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.4);
.card:hover .card__slide
transform: translateX(0);
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div class="cards">
<div class="container">
<div class="card">
<div class="card__header">header 1</div>
<div class="card__footer">
<div class="card__slide">
<span class="card__label">Learn more</span>
<i class="card__arrow fas fa-chevron-circle-right"></i>
</div>
</div>
</div>
<div class="card">
<div class="card__header">header 2</div>
<div class="card__footer">
<div class="card__slide">
<span class="card__label">Learn more</span>
<i class="card__arrow fas fa-chevron-circle-right"></i>
</div>
</div>
</div>
</div>
</div>
使用宽度:可以通过标签宽度的过渡来达到显示效果:
.cards
background: lightblue;
padding: 20px 0;
.container
max-width: 720px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
.card
background-color: white;
padding: 20px;
cursor: pointer;
transition: all 0.5s ease;
width: 250px;
border-radius: 1rem;
margin: 0.5rem;
.card__header
margin-bottom: 30px;
.card__footer
display: flex;
justify-content: flex-start;
align-items: center;
width: fit-content;
.card__label
display: inline-block;
width: 0;
overflow: hidden;
white-space: nowrap;
transition: width 1s ease-out;
margin-right: 0.3rem;
.card__arrow
color: #FF7C81;
font-size: 1.5rem;
@media (hover: hover)
.card:hover
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.4);
.card:hover .card__label
width: 100%;
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<div class="cards">
<div class="container">
<div class="card">
<div class="card__header">header 1</div>
<div class="card__footer">
<span class="card__label">Learn more</span>
<i class="card__arrow fas fa-chevron-circle-right"></i>
</div>
</div>
<div class="card">
<div class="card__header">header 2</div>
<div class="card__footer">
<span class="card__label">Learn more</span>
<i class="card__arrow fas fa-chevron-circle-right"></i>
</div>
</div>
</div>
</div>
Imgur 在其 CORS 政策中不允许某些来源。所以对于演示,我使用fontawesome chevron-circle-right 作为箭头。
【讨论】:
非常感谢!我还不能将赏金奖励给你(需要等待 10 小时),但会在宽限期结束后进行奖励:) 再次感谢。【参考方案2】:不完全确定这是您所要求的,但希望它能让您深入了解您正在尝试的内容。
.cards
background: lightblue;
padding: 60px 0;
.container
max-width: 720px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 auto;
.card
background-color: white;
padding: 30px;
cursor: pointer;
transition: all 0.5s ease;
width: 250px;
.card:hover
box-shadow: 0px 20px 25px 0px rgba(0, 0, 0, 0.1);
.card:hover .card__arrow
transform: translateX(5px);
.card:hover .card__label
display: inline-block;
visibility: visible;
margin-right: 6px;
.card__header
margin-bottom: 30px;
.card__footer
display: flex;
justify-content: flex-start;
align-items: center;
.card .card__footer::after
content: "";
transform: translateX(60px);
transition: transform .5s linear;
.card:hover .card__footer::after
transform: translateX(36px);
content: "Learn More";
transition:transform .5s linear;
.card__label
margin-right: 10px;
@media (hover: hover)
.card__label
margin: 0;
transition: opacity 0.5s;
visibility: hidden;
opacity: 0;
display: none;
<div class="cards">
<div class="container">
<div class="card">
<div class="card__header">
header
</div>
<div class="card__footer">
<img class="card__arrow" src="https://i.imgur.com/onjXVGW.png" />
</div>
</div>
<div class="card">
<div class="card__header">
header 2
</div>
<div class="card__footer">
<img class="card__arrow" src="https://i.imgur.com/onjXVGW.png" />
</div>
</div>
</div>
</div>
【讨论】:
嗨,我已经编辑了我的问题以明确我的目标:)以上是关于如何在悬停过渡期间使文本翻译/宽度增加的主要内容,如果未能解决你的问题,请参考以下文章