Question

我有一个css课程，用于将球向上和向下无限移动。

.active_animation {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  cursor: pointer;
}

.paused_animation {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

<div class="active_animation">Ball</div>

动画工作正常，但是当我尝试使用jquery暂停时（通过向球添加pause_animation）这个动画我无法将它移动到另一个位置。

如果我尝试删除.active_animation类，它将无法顺利停止。

我的问题是我如何暂停动画并有能力移动那个球？

请帮忙!!!

Answer 1

可能最简单的解决方案是让你的动画依赖于另一个变量，在这个变量上应用过渡，然后改变第二个变量的值

例如，您可以进行转换：translateY取决于元素的高度（使用百分比设置），然后将高度设置为0：

function stop () {
    var ele = document.getElementById('adapter');
    if (ele.style.height == '0%') {
        ele.style.height = '100%';
    } else {
        ele.style.height = '0%';
    }
}

.container {
	border: solid 1px green;
	height: 400px;
	width: 400px;
}

#adapter {
	height: 100%;
	transition: height 2s;
	animation: bounce 4s infinite alternate linear;
}

#div1 {
	height: 20px;
	width: 20px;
	background-color: bisque;
	border-radius: 50%;
}

@keyframes bounce {
	from {transform: translateY(0%);}
	to {transform: translateY(100%);}
}

button {
	position: absolute;
    left: 450px;
    top: 10px;
}

<div class="container">
    <div id="adapter">
        <div id="div1"></div>
    </div>
</div>
<button onclick="stop();">Stop</button>

CSS3顺利停止动画

1 个答案: