Question

除了几个怪癖之外，以下代码完全按预期工作

首先，当将鼠标悬停在大写“T”或“H”标题上时，动画非常有毛刺，有时甚至无法正确执行。底部的两个div是为了证明动画是平滑的并且完美地工作。使用hover代替mouseenter和mouseleave时，效果也没有差异。

为什么动画会像这样迸发出来？

第二个问题是，当您快速将鼠标滑过标题或底部的触发器div时，动画会跳至fade-out-left的开头。
我尝试使用.is(':animated')仅在第一个完成时运行fade-out-left，但值永远不会为真。我也试过了.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>

Answer 1

将 z-index 添加到 char 类以避免故障，如此

＆＃13;

print('Hello,',fn, ln + '!')

＆＃13;

// 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');
});

＆＃13;

* {
  font-size: 1.25em;
}

/* Content */

.segment {
  display: inline;
}

.char {
  background: yellow;
  position: relative;
  z-index:999;
}

.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;
}

＆＃13;

Answer 2

在考虑之后，你真的不需要JS来进行简单的鼠标输入事件。我用纯CSS重做你所有的例子，允许你添加没有JS更新的新行等。

＆＃13;

* {
  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;
}

＆＃13;

<!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>

＆＃13;

Glitchy CSS动画Wit文本

2 个答案: