使用JavaScript将Css动画应用到具有onclick的类_Javascript_Html_Css

使用JavaScript将Css动画应用到具有onclick的类

javascript html css

使用JavaScript将Css动画应用到具有onclick的类,javascript,html,css,Javascript,Html,Css,我对这个脚本有一个建议： function ani(){ document.getElementById('para').className ='exeInputapparition'; } 在ID为para的我的元素上应用css动画。它正在工作，但我想知道是否可以应用于所有具有类para而不是ID的元素，因为我有多个元素需要应用CSS动画。提前感谢您的帮助：） Css： @keyframes inputapparition { 0% { op

我对这个脚本有一个建议：

function ani(){
    document.getElementById('para').className ='exeInputapparition';
}

在ID为

para

的我的元素上应用css动画。它正在工作，但我想知道是否可以应用于所有具有

类

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; 
}

您可以使用

document.querySelectorAll

    var x=document.querySelectorAll(".para");
   for(var a =0;a<x.length;a++){
   x[a].classList.add("exeInputapparition")
  }

var x=document.queryselectoral（“.para”）；
对于（var a=0；a函数querySelectorAll
返回所有元素，它是一个“DOM数组”，因此没有属性className
。您应该循环列表并逐个更改：
var allElementsPara = document.querySelectorAll(".para");

for (var i = allElementsPara.length - 1; i >= 0; i--) {
    allElementsPara.item(i).classList.add("exeInputapparition");
};

id
是唯一的。您必须为要设置动画的所有元素使用相同的类。对于所有元素，请将类设置为设置动画
并编辑该函数
function ani(){
    document.getElementsByClassName('animate').className ='exeInputapparition';
}

你可以忽略之前的答案，在你发布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中查看它的操作，单击它以切换可见性
更有效的解决方案是将类应用于主体
元素。

每次访问DOM都需要一些毫秒，当您的web页面变得巨大，使用大量JavaScript时，速度可能会变慢
使用给定类访问单个DOM元素（
）而不是N
元素将：
减少对DOM的访问次数
将对DOM执行的查询减少为0
确保所有元素开始同时出现
确保脚本运行后添加了类para
的每个元素都具有正确的样式

//这里我使用'setTimeout'使函数自动启动
//从逻辑上讲，您可以获取此函数的内容并将其放入
//无论你喜欢哪里
setTimeout（函数（）{
document.body.className+='in'；
}，1000）；
{
不透明度：0；
过渡：不透明度0.5s线性；
}
.in.段{
不透明度：1；
}
第1段
第2段
第3段
此解决方案将帮助您。使用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>


$（文档）.ready（函数（）{
$（“.clickme”）。单击（函数（）{
动画（{opacity:0.5}，1000）；
});
});
我试过这样做，但它不是有效的文档。queryselectoral（'para'）。className='exeiputpartition'；你是否错过了上课前的点（.）？它是document.queryselectoral（“.exeiputpartition”）；或者像这样：var animatedEls=document.getElementsByClassName（“exeiputpartition”）；var index=0，length=animatedEls.length；例如（；indexGetElementsByCass

。这无法工作，GetElementsByCassName
返回DOM元素数组，该数组没有属性className
可能与do重复Document.querySelectorAll（“#para”）…所有元素如何都具有相同的id？这不违反标准吗？是的。但问题是：>在具有id para的元素上应用css动画。我想这是一个问题……“我想知道是否可以应用于具有类para而不是id的所有元素”Ohn，这是真的。哈哈。谢谢。当你只需要几行CSS和一行JS就可以完成所有的事情时，为什么要包括jQuery并使用JavaScript来执行动画呢？使用所有这些东西来完成这么简单的任务太过简单了。只是一个改进：你可以使用evt.target
而不是var c=…
，这样切换就可以了nction将引用单击的目标，您不必对同一个元素进行两次查询。