CSS animation 干扰变换转换

Question

I want to apply a hover animation on the class circle and on click of the circle I want it to transition smoothly to its desired position but I can't get that transition to work. 如果没有 hover animation，转换工作正常，但只要我在 ZE0542F579DF5310E8132ZADE69 上添加 animation，转换就不再适用。

这是代码

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

右边的方框是想要的过渡效果左边的方框有一个hover animation，但是一旦我点击容器，圆圈会捕捉到变换后的position而不是过渡。

为什么会这样？？ 如何让圆圈在 hover 上设置动画并在点击时转换？

谢谢！

Answer 1

您只需使用伪选择器:hover和:active无需 js。

Answer 2

看看我放在下面的示例，请注意我必须插入一个 div 来控制circle过渡 state。 不混合animation和transition的持续时间。

对于更复杂的 animation 序列，您应该查看transition事件

 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>