鼠标离开后CSS过渡到原始状态
Posted
技术标签:
【中文标题】鼠标离开后CSS过渡到原始状态【英文标题】：CSS transition to original state after mouseleave 【发布时间】：2019-04-07 15:43:26 【问题描述】：编辑：这与这篇文章不同，How to reverse an animation on mouse out after hover。不同之处在于，在这种情况下，转换的状态（进展程度）是必不可少的，这与前面提到的完全忽略它的帖子不同。
TL;DR：如何在动画结束后将元素动画/过渡回其原始状态？
你好，
我正在尝试制作动画面板，以便它们在悬停时“浮动”。我的问题是鼠标离开面板，而不是转换回原来的状态，它会立即跳回来。
可以在下面的 sn-p 中找到一个高度简化的版本。
body
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
div
width: 50px;
height: 50px;
background-color: red;
div:hover
animation: float 2s infinite ease;
@keyframes float
0%, 100%
transform: none;
50%
transform: translateY(-20px);
<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>如您所见，浮动它会触发类似于浮动运动的平滑动画，但是，当鼠标离开框并且动画停止时，它会突然中断。
所以我的问题是：有没有办法让盒子恢复到原来的状态，最好不使用 javascript（尽管所有建议都值得赞赏）。
（这可能已经在网上某个地方得到了回答，如果是这样，那么我真的很抱歉，但我无法找到解决我的问题的正确方法。如果您找到适用的解决方案，请添加副本。 )
谢谢。
【问题讨论】：
TL:DR 不，你不能用 CSS ......你所能做的就是为你的特殊情况找到一些解决方法，解决方案肯定会涉及使用简单的转换而不是动画，但我们需要找出无限动画的难点 How to reverse an animation on mouse out after hover的可能重复 @CodeGator 感谢您的加入。但是，请参阅编辑 1。 【参考方案1】：您将不得不使用 JavaScript 和 CSS 过渡：
var box = document.getElementById('box')
var timer
box.addEventListener('mouseenter', function ()
box.classList.add('up')
timer = setInterval(function ()
box.classList.toggle('up')
, 1000)
)
box.addEventListener('mouseleave', function ()
clearInterval(timer)
box.classList.remove('up')
)body
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
div
width: 50px;
height: 50px;
background-color: red;
transition: transform 1s ease;
div.up
transform: translateY(-20px);
<html>
<head>
<title>animate to orignal position</title>
</head>
<body>
<div id='box'></div>
</body>
</html>【讨论】：
以上是关于鼠标离开后CSS过渡到原始状态的主要内容，如果未能解决你的问题，请参考以下文章