退出悬停时反转动画

Posted 2023-03-06

【中文标题】退出悬停时反转动画

【英文标题】：Reverse animation when exiting hover

【发布时间】：2021-11-13 10:38:03

【问题描述】：

当将鼠标悬停在单词上时，它会出现平滑的动画，但是当我们退出悬停状态而不是反转动画时，它就会被切断。在进入悬停状态和退出悬停状态时如何使动画平滑？

示例如下：

*
  font-size: 50px;

.container a
    position:relative;
    float:left;
    font-family: 'Montserrat', sans-serif;
    font-weight:bold;
    margin-left: 5%;
    padding-right: 10px;

.child
    position:relative;
    float:left;
    display:none;
    padding-left: 10px;
    font-weight:bold;

.container:hover > .child
    transition: .4s;
    color:#F0C930;
    border-left: 4px solid #F0C930;
    animation: effect .5s;
    display:block;

@keyframes effect
from
position:relative;
padding-left: 0px;
opacity:0;
to
position:relative;
padding-left: 10px;
opacity:1;
    

<p>hover over "Word"</p>
<div class="container">
  <a>Word</a>
  <div class="child">Word</div>
 </div>

【问题讨论】：

你确定要使用动画吗？过渡和转换不是更适合这个吗？

这是我想到的第一个想法，但我无法让转换工作，所以我决定使用关键帧动画

请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。

【参考方案1】：

使用 CSS transition 处理不透明度和填充。 CSS Transition

.container 
  display: flex;
  font-size: 50px;
  cursor: pointer;


.container .child 
  transition: opacity .5s, padding .5s;
  border-left: 4px solid #F0C930;
  opacity: 0;
  margin-left: 20px;
  color: #F0C930;


.container:hover .child 
  opacity: 1;
  padding-left: 20px;

<div class="container">
  <a>Word</a>
  <div class="child">Word</div>
</div>

【讨论】：

这行得通！非常感谢

@Sakumi：很高兴你得到了一些指导。如果有帮助，请考虑接受答案。