除了一些怪癖之外，以下代码完全按照预期工作
首先，当鼠标悬停在大写“T”或“H”标题上时，动画非常不稳定，有时甚至无法正确执行。底部的两个 div 是为了证明动画流畅并且工作完美。使用 hover 代替 mouseenter 和 mouseleave 时，性能也没有差异。
为什么动画会这样？
第二个问题是，当您在标题或底部的触发 div 上快速滑动鼠标时，动画会跳到 fade-out-left 的开头。
我尝试使用 .is(':animated') 仅在第一个完成时运行 fade-out-left，但该值永远不会为 true。我也尝试过 .bind('animationend') 但当我修复跳过问题时，快速滑动时不会播放 fade-out-left 动画.
我觉得这是一个常见的动画问题，但我还没有找到任何相关信息。 如何防止快速滑动时动画跳过？
// Content
$('.char').mouseenter(function() {
$(this).next().addClass('animate');
});
$('.char').mouseleave(function() {
$(this).next().removeClass('animate');
});
// Triggers
$('.trigger').mouseenter(function() {
$('#' + $(this)[0].id[0] + '-container').find('.line').addClass('animate');
});
$('.trigger').mouseleave(function() {
$('#' + $(this)[0].id[0] + '-container').find('.line').removeClass('animate');
});* {
font-size: 1.25em;
}
/* Content */
.segment {
display: inline;
}
.char {
background: yellow;
position: relative;
}
.line {
position: absolute;
opacity: 0;
animation-name: fade-out-left;
animation-duration: 1s;
animation-play-state: ease-in;
animation-fill-mode: reverse;
}
.animate {
animation-name: fade-in-right;
animation-duration: 1s;
animation-play-state: ease-out;
animation-fill-mode: forwards;
}
/* Animations */
@keyframes fade-in-right {
from {
opacity: 0;
transform: translatex(-20px);
}
to {
opacity: 1;
transform: translatex(0);
}
}
@keyframes fade-out-left {
from {
opacity: 1;
transform: translatex(0);
}
to {
opacity: 0;
transform: translatex(-20px);
}
}
/* Triggers */
#triggers-container {
position: absolute;
left: 10px;
bottom: 10px;
}
.trigger {
position: inline;
width: 50px;
height: 50px;
}
#t-trigger {
float: left;
background-color: gray;
}
#h-trigger {
float: right;
background-color: green;
}<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<!-- Content -->
<div id="t-container" class="container">
<div class="char segment">T</div>
<div class="line segment">his is some text.</div>
</div>
<div id="h-container" class="container">
<div class="char segment">H</div>
<div class="line segment">ere is some more text.</div>
</div>
<!-- Triggers -->
<div id="triggers-container">
<div id="t-trigger" class="trigger">T</div>
<div id="h-trigger" class="trigger">H</div>
</div>
</body>
</html>最佳答案
想了想，简单的鼠标输入事件确实不需要JS。 我用纯 CSS 重做了所有示例，允许您添加新行而无需更新 JS 等。
* {
font-size: 1.25em;
}
.container {
pointer-events: none;
}
.container > div {
display: inline-block;
}
.container .char {
pointer-events: auto;
background: yellow;
}
.container:nth-child(2) .char {
background: green;
}
.container .line {
transform: translateX(-1em);
opacity: 0;
transition: all 1s;
}
.container:hover .line {
transform: translateX(0);
opacity: 1;
}<!DOCTYPE html>
<html>
<body>
<!-- Content -->
<div class="container">
<div class="char segment">T</div>
<div class="line segment">his is some text.</div>
</div>
<div class="container">
<div class="char segment">L</div>
<div class="line segment">orem ipsum</div>
</div>
<div class="container">
<div class="char segment">T</div>
<div class="line segment">his is new text</div>
</div>
</body>
</html>关于javascript - 带有文本的 CSS 动画故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46350183/