使用onclick使用JavaScript将Css Animation应用于类
[英]Apply Css Animation to a class with onclick Using JavaScript
问题描述
我有一个这个脚本：
function ani(){
document.getElementById('para').className ='exeInputapparition';
}
在具有ID para元素上应用CSS动画。 它正在工作，但我想知道是否可以将所有具有class para而不是ID元素应用于该元素，因为我有多个元素需要应用CSS动画。 在此先感谢您的帮助 ：）
Css：
@keyframes inputapparition {
0%
{
opacity: 0;
}
100%
{
opacity: 1;
}
}
.exeInputapparition
{
animation-name: inputapparition;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#para
{
margin: 0;
font-family: "Roboto"
font-size: 20px;
opacity: 0;
}
6 个解决方案
解决方案1
1
函数querySelectorAll返回所有元素，它是一个“ DOM数组”，因此没有属性className 。 您应该循环播放列表并逐一更改：
var allElementsPara = document.querySelectorAll(".para");
for (var i = allElementsPara.length - 1; i >= 0; i--) {
allElementsPara.item(i).classList.add("exeInputapparition");
};
解决方案2
0 2016-01-16 14:33:55
您可以使用document.querySelectorAll
var x=document.querySelectorAll(".para");
for(var a =0;a<x.length;a++){
x[a].classList.add("exeInputapparition")
}
解决方案3
0 2016-01-16 14:51:35
id是唯一的。 您必须对要设置动画的所有元素使用相同的类。 对于所有元素，使类animate并编辑函数
function ani(){
document.getElementsByClassName('animate').className ='exeInputapparition';
}
解决方案4
0 2016-01-16 15:36:21
您可以无视先前的答案，而在发布CSS之前，人们已经知道并且不知道您到底想要什么。 您没有为此的关键帧。 这是完整的JS解决方案，因为无论如何您都需要JS。
document.querySelector(".reveal3").addEventListener("click", function(){
toggle();
});
function toggle(){
var c = document.querySelector(".reveal3");
if(c.style.opacity == 1){
c.style.opacity = 0;
} else {
c.style.right = "0px";
c.style.opacity = 1;
}
}
在此处查看操作，右侧div，单击以切换可见性。
解决方案5
0 2016-01-16 16:08:57
一种更有效的解决方案是将类应用于body元素。
每次对DOM的访问都需要花费数毫秒，并且当您的网页变得庞大且使用许多JavaScript时，它可能会变慢。
访问单个DOM元素（ <body> ）而不是具有给定类的N元素将：
- 减少对DOM的访问次数；
- 将您在DOM上执行的查询减少为0；
- 确保所有元素开始同时显示；
- 确保脚本运行后添加了类
para每个元素都将具有正确的样式；
// here I use a `setTimeout` to make the function start automatically // logically you can take the content of this function and put it // wherever you prefer setTimeout(function() { document.body.className += ' in'; }, 1000);
.para { opacity: 0; transition: opacity 0.5s linear; } .in .para { opacity: 1; }
<div class="para">para 1</div> <div class="para">para 2</div> <div class="para">para 3</div>
解决方案6
-1 2016-01-16 16:48:43
这个解决方案将帮助您。使用此jQuery很容易。我已经实现了div也可以将其用于图像。
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div class="clickme" style="background-color:orange;width:100px;height:100px;">
<!--use <img src="imageurl"/> here-->
</div>
<!-- js-->
<script type="text/javascript">
$(document).ready(function(){
$(".clickme").click(function(){
$(this).animate({opacity:0.5},1000);
});
});
</script>
</body>
</html>
如何将 animation 延迟仅应用于一个 animation 和 CSS 和 javascript？
[英]How to apply an animation delay to only one animation with CSS and javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.