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

您只需要在不使用js的情况下使用伪选择器:hover和:active。

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>

CSS动画干扰转换过渡

2 个答案: