Question

这是我的问题：

我用JS和CSS开发一个小动画，我想在动画结束时停止。现在，我的动画回到了他的基本状态。

＆＃13;

var
	btn = document.getElementById("btn");
	anim = document.getElementById("anim");
  
// button click event
btn.addEventListener("click", ToggleAnimation, false);

// apply all webkit events
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);

// and standard events
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener);

// handle animation events
function AnimationListener(e) {
	if (e.type.toLowerCase().indexOf("animationend") >= 0) {
		ToggleAnimation();
	}
}

// start/stop animation
function ToggleAnimation(e) {
	var on = (anim.className != "");
	anim.className = (on ? "" : "enable");
};

＆＃13;

#anim
{
	display: block;
	width: 150px;
  height:150px;
	background-color: #060;
}

#anim.enable
{
	-webkit-animation: flash 1s ease;
	animation: flash 1s ease;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

/* animation */
@-webkit-keyframes flash {
	50% { margin-top:50px; }
}

@keyframes flash {
	50% { margin-top:50px; }
}

＆＃13;

<button id="btn">
  Launch animation
</button>
<p><a id="anim" href="#"></a></p>

＆＃13;

这是我的FIDDLE。我认为问题在于功能＆＃34; ToggleAnimation＆＃34;但我找不到什么。

提前致谢并度过了愉快的一天。

Azyme

Answer 1

我想我已经实现了你想要的 - 改变动画以具有开始和结束状态（0％和100％）并使用jquery来添加类＆＃34;启用＆＃34;而不是切换它

CSS

@-webkit-keyframes flash {
  0% { margin-top: 0}
  100% { margin-top:50px; }
}

@keyframes flash {
  0% { margin-top: 0}
  100% { margin-top:50px; }
}

jquery的

$('#btn').click(function(){
   $('#anim').addClass("enable");
})

希望有用，制作了一个代码http://codepen.io/anon/pen/vLLKoZ

让动画处于结束状态JS / CSS

1 个答案: