如何在悬停过渡期间使文本翻译/宽度增加

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>

【讨论】:

嗨,我已经编辑了我的问题以明确我的目标:)

以上是关于如何在悬停过渡期间使文本翻译/宽度增加的主要内容,如果未能解决你的问题,请参考以下文章

当用户移动器悬停在滚动条上时如何增加滚动条宽度

如何在悬停时增加 gwt menuitem

三个具有相对宽度的浮动元素上的 css 过渡

悬停(jQuery)上的动画过渡[关闭]

Ext JS 网格面板:如何在鼠标悬停时显示内容

顺风过渡宽度