鼠标离开时的 CSS 动画答案

【问题标题】：CSS animation on mouse leave鼠标离开时的 CSS 动画
【发布时间】：2018-09-16 05:31:17
【问题描述】：

所以我正在尝试做一些类似瓷砖或 netflix 所做的事情。我有一个盒子，我试图让它在鼠标悬停时增长，并在鼠标离开时缩小尺寸。到目前为止，我有这个。

.nav {
  position: relative;
  top: 25%;
  width: 100%;
  color: black;
  text-align: center;
}
.nav a {
  color: white;
  text-decoration: none;
}
.link {
  font-size: 24px;
  width: 100%;
  height: 25%;
  background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
  display: inline;
  padding-right: 12.5%;
  padding-left: 12.5%;
  padding-bottom: 6.25%;
  padding-top: 6.25%;
  box-shadow: 0px 0px 10px 5px grey;
  animation-name: downsize;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.link:hover {
  animation-name: resize;
  animation-duration: .5s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  font-size: 32px;
  padding-right: 14.5%;
  padding-left: 14.5%;
  padding-bottom: 8.25%;
  padding-top: 8.25%;
}

<div class="nav">
  <a href="/public/MM/EnterUp">
    <div class="link" style="margin-right: 15px;">
      Enter Up
    </div>
  </a>
  <a href="/public/MM/EnterUp">
    <div class="link" style="margin-right: 15px;">
      View Ups
    </div>
  </a>
</div>

我用CSS-Tricks 让它在鼠标悬停后减少。我的问题是，与 CSS-Tricks 不同，当您加载页面时，我不希望在鼠标离开后运行 downsize 动画。有人有解决方案吗？感谢您的帮助！

【问题讨论】：

你应该使用 JQ 或纯 JS 来制作这个动画，因为 css 中不存在 mouseout 事件，你可以让两个类每个都有动画，并且在鼠标悬停时删除这些类并添加保持缩放的类动画，onmouseout 删除缩放类并添加持有旋转的类。
悲伤的一天，你会认为他们会为此创建两个单独的选择器。那么 CSS-Tricks 是如何做到的呢？因为我不认为他们使用 javascript，但很容易出错。 css-tricks.com/examples/DifferentTransitionsOnOff
mouseLeave 之后你想要什么类型的动画？

标签： html css css-animations

【解决方案1】：

虽然 CSS 中没有与 mouseleave 或 mouseout 事件等效的事件，但您可以通过将“退出”转换应用于选择器，然后使用“进入”转换覆盖它来实现相同的行为 @ 987654323@伪类，像这样：

div{
    background:#000;
    color:#fff;
    font-size:16px;
    line-height:100px;
    text-align:center;
    transition:font-size .5s ease-out,line-height .5s ease-out,width .5s ease-out;
    width:100px;
}
div:hover{
    font-size:20px;
    line-height:125px;
    transition:font-size .25s ease-in,line-height .25s ease-in,width .25s ease-in;
    width:125px;
}
/* HOUSEKEEPING */
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
body,html{height:100%;}
body{align-items:center;display:flex;justify-content:center;}

&lt;div&gt;Text&lt;/div&gt;

或者，如果您希望应用的 transition 在两种情况下都相同，只是颠倒过来，则无需在您的 :hover 选择器中覆盖它。

【讨论】：

太好了！现在是凌晨 4:00，所以我明天试试，然后给你更新:)

【解决方案2】：

您可以简单地使用 transition 进行填充

在你的情况下应该这样做：

.nav {
        position: relative;
        top: 25%;
        width: 100%;
        color: black;
        text-align: center;
    }
    .nav a {
        color: white;
        text-decoration: none;
    }
    .link {
        font-size: 24px;
        width: 100%;
        height: 25%;
        background: linear-gradient(135deg, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
        display: inline;
        padding-right: 12.5%;
        padding-left: 12.5%;
        padding-bottom: 6.25%;
        padding-top: 6.25%;
        box-shadow: 0px 0px 10px 5px grey;
        transition: padding 0.4s ease-out;
    }
    .link:hover {
        font-size: 32px;
        padding-right: 14.5%;
        padding-left: 14.5%;
        padding-bottom: 8.25%;
        padding-top: 8.25%;
}

这里的关键是使用：

transition: padding 0.4s ease-out;

【讨论】：