Question

我有一个这样的剧本：

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

Answer 1

函数querySelectorAll返回所有元素，它是一个＆＃34; DOM数组＆＃34;，因此没有属性className。您应该循环列表并逐个更改：

var allElementsPara = document.querySelectorAll(".para");

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

Answer 2

您可以使用document.querySelectorAll

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

JSFIDDLE

JSFIDDLE WITH .para

Answer 3

id是唯一的。您必须为要设置动画的所有元素使用相同的类。对于所有元素，放置类animate并编辑函数

function ani(){
    document.getElementsByClassName('animate').className ='exeInputapparition';
}

Answer 4

您可以忽略以前的答案，在发布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，单击它以切换可见性。

http://codepen.io/damianocel/pen/GopoJB

Answer 5

更具效果的解决方案是将该类应用于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>

Answer 6

这个解决方案可以帮助你快速使用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>

使用onclick将Css Animation应用于类

6 个答案: