Javascript 单击按钮时启动 css 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27543964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Start a css animation on button click
提问by Nikki
Hi I've been looking for answers on my problem now for maybe a few weeks now and I find nothing. I'm trying to make a reaction test to check how long time it takes for the user before they react and it will popup either a square or a circle and I hit a problem...
嗨，我一直在寻找关于我的问题的答案可能已经有几个星期了，但我一无所获。我正在尝试进行反应测试，以检查用户在反应之前需要多长时间，它会弹出一个正方形或一个圆形，然后我遇到了问题......
My question is if there's any way to start an animation when the user clicks the button on the screen ?
我的问题是，当用户单击屏幕上的按钮时，是否有任何方法可以启动动画？
Here's my code so far:
到目前为止，这是我的代码：
HTML:
HTML：
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
CSS:
CSS：
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
@-webkit-animation myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.
我更喜欢 CSS、HTML、jQuery 或 Javascript。但如果有另一种方法可以做到这一点，我也很乐意听到。
回答by Debasish Pothal
$(function(){
$('#second-parent').click(function(){
e1 = $('#first-child');
e1.addClass('animate');
e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
e1.removeClass('animate');
});
});
}); #first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.animate {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
}
@keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
@-webkit-keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}<div id="first-child"></div><button id="second-parent">Click me !</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>$(function(){
$('#second-parent').on('click',function(){
$('#first-child').addClass('animate');
});
}); #first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.animate {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
}
@keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first-child"></div>
<button id="second-parent">Click me !</button>回答by zuo
Use a css class for the animation and add the class to div when button clicked. (use @keyframesto define css animations.)
为动画使用 css 类，并在单击按钮时将该类添加到 div。（用于@keyframes定义 css 动画。）
回答by John Bentley
A full example without using Jquery:
不使用 Jquery 的完整示例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Animations</title>
<style>
/* <![CDATA[ */
div {
height: 2em;
width: 50%;
border: 1px solid black;
background-color: black;
color: yellow;
}
.animate {
animation-name: slide-right;
animation-duration: 2s;
/* Preserve the effect of the animation at ending */
animation-fill-mode: forwards;
}
@keyframes slide-right {
from {
margin-left: 0px;
}
50% {
margin-left: 110px;
opacity: 0.5;
}
to {
margin-left: 200px;
opacity: 0.2;
}
}
/* ]]> */
</style>
<script>
/* <![CDATA[ */
function DoAnimation() {
var targetElement = document.getElementById("target");
targetElement.className = "animate";
}
/* ]]> */
</script>
</head>
<body>
<h1>CSS Animations</h1>
<div id="target">Super div</div>
<button onclick="DoAnimation();">Go</button>
</body>
</html>
回答by ReallyMadeMeThink
Remove the -webkit-animation and animation definitions from #firstChild and instead create an "anim" class definition:
从 #firstChild 中删除 -webkit-animation 和动画定义，而是创建一个“anim”类定义：
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.anim{
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
Then when you want to trigger the animation simply add the .anim class to your element with jQUery:
然后，当您想要触发动画时，只需使用 jQUEry 将 .anim 类添加到您的元素中：
$("#first-child").addClass("anim");
回答by Binh LE
Here the sample for you
这是给你的样本
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
@-webkit-animation myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
.second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<script>
$(document).ready(function()
{
$('#Second-parent').click(function()
{
$('#first-child').addClass('second-parent');
});
});
</script>
</head>
<body>
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
</body>
</html>
==> please add the jquery library in the , you can download lirabry in: http://jquery.com/download/
==> 请在 .jquery 库中添加 jquery 库，您可以在：http: //jquery.com/download/下载lirabry
