使用onclick使用JavaScript将Css Animation应用于类
[英]Apply Css Animation to a class with onclick Using JavaScript
问题描述
I have a this script : 
我有一个这个脚本：
function ani(){
document.getElementById('para').className ='exeInputapparition';
}
To apply a css animation on my element who has the ID para . 在具有ID para元素上应用CSS动画。 It's working but i wanted to know if it's possible to apply to all element who have the class para instead of the ID because i have more than one element where i need to apply my CSS animation. 它正在工作，但我想知道是否可以将所有具有class para而不是ID元素应用于该元素，因为我有多个元素需要应用CSS动画。 Thanks in Advance for your help :) 在此先感谢您的帮助 ：）
The 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
The function querySelectorAll returns all elements, it's a "DOM array", therefore there isn't the attribute className . 函数querySelectorAll返回所有元素，它是一个“ DOM数组”，因此没有属性className 。 You should loop the list and change one by one: 您应该循环播放列表并逐一更改：
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
You can use document.querySelectorAll 您可以使用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
The id is unique. id是唯一的。 You must use a same class for all element that you want to animate. 您必须对要设置动画的所有元素使用相同的类。 For all element, put the class animate and edit the function 对于所有元素，使类animate并编辑函数
function ani(){
document.getElementsByClassName('animate').className ='exeInputapparition';
}
解决方案4
0 2016-01-16 15:36:21
You can disregard the previous answers, people did and could not know what exactly you want before you posted the css. 您可以无视先前的答案，而在发布CSS之前，人们已经知道并且不知道您到底想要什么。 You do not the keyframes for this. 您没有为此的关键帧。 Here is a full JS solution, as you need JS for this anyway. 这是完整的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;
}
}
See it in action here, the div on the right side, click on it to toggle visibility. 在此处查看操作，右侧div，单击以切换可见性。
http://codepen.io/damianocel/pen/GopoJB http://codepen.io/damianocel/pen/GopoJB
解决方案5
0 2016-01-16 16:08:57
A more performing solution would be to apply the class to the body element. 一种更有效的解决方案是将类应用于body元素。
Every access to the DOM takes some ms and when your web page becomes huge, with a lot of JavaScript, it can get slow. 每次对DOM的访问都需要花费数毫秒，并且当您的网页变得庞大且使用许多JavaScript时，它可能会变慢。
Accessing a single DOM element ( <body> ) instead N elements with the given class will: 访问单个DOM元素（ <body> ）而不是具有给定类的N元素将：
- reduce the number of accesses to the DOM; 减少对DOM的访问次数；
- reduce to 0 the queries you perform on the DOM; 将您在DOM上执行的查询减少为0；
- make sure all the elements starts appearing at the same time; 确保所有元素开始同时显示；
- assure that every element with the class
paraadded after the script has run, will have the correct style;确保脚本运行后添加了类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
this solution will help your.it is easy to use jquery with this.I have implemented for a div .you can use it for image also.so try this 这个解决方案将帮助您。使用此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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.