如何在纯 javascript 中添加 animate.css class onclick 事件?
How can add animate.css class onclick event in pure javascript?
我在 javascript 中无法使用点击功能。如何添加淡入 class 单击事件?如果可能,现代 javascript 使用或 es6。另外,如何在 5 秒内删除 class?请建议我没有 JQuery.
如果可能,所有点击事件方法函数都使用。
我在 javascript 中无法使用点击功能。如何添加淡入 class 单击事件?如果可能现代 javascript 使用或 es6.Also,我怎样才能在 5 秒内删除 class?请建议我没有 JQuery,拜托。
如果可能,所有点击事件方法函数都使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css layout</title>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
-webkit-animation: fadeIn .5s ease-in 1 forwards;
animation: fadeIn .5s ease-in 1 forwards;
opacity: 0;
}
</style>
</head>
<body>
<!--button-->
<p>
<button onclick="animations()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
<!--js-->
<script>
function animations() {
var elem = document.getElementById("animate");
}
</script>
</body>
</html>
您可以使用 classList
属性 将 class 添加到 DOM 元素。
请参阅 classList
的 MDN 条目:https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
然后您可以使用 setTimeout 函数删除 class。
所以你的动画函数看起来像这样:
function animations() {
var elem = document.getElementById("animate");
elem.classList.add('fade-in'); // Add .fade-in class
setTimeout(function() {
elem.classList.remove('fade-in'); // Remove .fade-in class
}, 5000); // 5000ms
}
我在 javascript 中无法使用点击功能。如何添加淡入 class 单击事件?如果可能,现代 javascript 使用或 es6。另外,如何在 5 秒内删除 class?请建议我没有 JQuery.
如果可能,所有点击事件方法函数都使用。
我在 javascript 中无法使用点击功能。如何添加淡入 class 单击事件?如果可能现代 javascript 使用或 es6.Also,我怎样才能在 5 秒内删除 class?请建议我没有 JQuery,拜托。 如果可能,所有点击事件方法函数都使用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css layout</title>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.fade-in {
-webkit-animation: fadeIn .5s ease-in 1 forwards;
animation: fadeIn .5s ease-in 1 forwards;
opacity: 0;
}
</style>
</head>
<body>
<!--button-->
<p>
<button onclick="animations()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
</div>
<!--js-->
<script>
function animations() {
var elem = document.getElementById("animate");
}
</script>
</body>
</html>
您可以使用 classList
属性 将 class 添加到 DOM 元素。
请参阅 classList
的 MDN 条目:https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
然后您可以使用 setTimeout 函数删除 class。
所以你的动画函数看起来像这样:
function animations() {
var elem = document.getElementById("animate");
elem.classList.add('fade-in'); // Add .fade-in class
setTimeout(function() {
elem.classList.remove('fade-in'); // Remove .fade-in class
}, 5000); // 5000ms
}