CSS动画干扰变换过渡

Question

我想在 circle 类上应用悬停动画并单击 circle 我希望它平滑地过渡到所需位置，但我无法使过渡工作。没有悬停动画，过渡效果很好，但是一旦我在悬停时添加动画，过渡就不再适用了。

这是代码

<div class="doc">
<!--   TRANSITION NOT WORKING W/ HOVER ANIMATION -->
  <div id="mainContainer" class="container">
  <div id="circle" class="circle"></div>
  </div>
</div>

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 3px solid black;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: red;
  transition: all 1s ease;
}

.move {
  transform: translateX(50px);
}

.container:hover > .circle {
  animation: moveUp 1s infinite ease;
}

.container:hover > .move {
  animation: none;
}


@keyframes moveUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(0);
  }
}

document.getElementById("mainContainer").onclick = function() {
var element = document.getElementById("circle");
  element.classList.add("move");
}

这是小提琴： https://jsfiddle.net/bshm0xca/58/

右边的框是想要的过渡效果 左边的框有一个悬停动画，但是一旦我点击容器，圆圈会捕捉到变换的位置，而不是过渡到它。

为什么会这样？？如何让圆圈在悬停时进行动画处理并在点击时进行转换？

谢谢！

Answer 1

你只需要使用伪选择器:hover 和:active 没有js。

Answer 2

看看我在下面整理的示例，请注意我必须插入一个 div 来控制circle 转换状态。不混合animation 和transition 的持续时间。

对于更复杂的动画序列，你应该看看transition events

document.getElementById("mainContainer").onclick = function() {
    const element = document.getElementById("circle");
    element.classList.toggle("move");
  
  element.addEventListener('transitionstart', () => {
    element.classList.add('moving')
  });
  
  element.addEventListener('transitionend', () => {
    element.classList.remove('moving');
  });
}

.doc {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 300px;
  height: 100%;
}

.circle {
  transition: all 2.5s ease;
}

.circle-bubble {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: red;
}

.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 3px solid black;
}

.move {
  transform: translateX(50px);
}

.container:hover .circle:not(.moving) .circle-bubble {
  animation: moveUp .5s infinite ease;
}


@keyframes moveUp {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  80% {
    transform: translateY(0);
  }
}

<div class="doc">
  <div id="mainContainer" class="container">
    <div id="circle" class="circle">
      <div class="circle-bubble"></div>
    </div>
  </div>
</div>