在页面中使用加载器？？？否 jQuery 请问？

Question

请看我的上一篇。问题太多。几乎相同：-

现在，为了回应我收到的唯一评论，我自己做了一些研究。我找到了一个很酷的页面 :-https://css-tricks.com/controlling-css-animations-transitions-javascript/

在该页面上阅读了一些内容以及 himanshu 评论中提到的内容后，这就是我得到的:-

HTML :

<body onload=" setTimeout(work, 2000)" >

<div class = circle ></div>


<br>
<br>
<br>
<br>
<br>

<div id = test>
    8et 84yutreuty8e45 84 eyt84
</div>


<br>
<br>
<br>
<br>
<br>

</body>

CSS:

<style type="text/css">


.circle {
    border: 5px solid red;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    border-top:5px solid blue; 
    animation: rotate 2s linear infinite;
    opacity: 1;

}

.circle.awesome {
    opacity: 0;
    transition: opacity 5s;
}


@keyframes rotate {
    0%{transform:rotate(0deg);}

    100%{transform: rotate(360deg);}

}



</style>

Javascript:

<script type="text/javascript">

var web = document.getElementByClassName("circle")[0] ;

function work () {

     test.innerHTML = ("pppppppppppppppppppp");
     web.classList.add('awesome') ;
}



</script>

然而，似乎出了点问题。

文字改变了，但不透明度没有改变。请告诉我怎么了。我的猜测是动画和过渡有点相互冲突，动画不允许过渡工作。但是，如果是这样的话，我似乎无法找到解决办法。

此外，[0] 行中的 [0] 有什么用：-

 var web = document.getElementByClassName("circle")[0] ;

此外，如果您能就如何继续完成我在问题（link 上面）中提到的其余事情提供一些提示，那将非常有帮助。这样我就不用再问了进一步的问题，以防我遇到障碍。 :D

P.S : 请不要使用 jQuery。还不知道。

Answer 1

应该是getElementsByClassName而不是getElementByClassName。可能这就是您的错误来源。

在页面中使用加载器？？？否 jQuery 请问？

Using loader in a page??? NO jQuery pls?

html

javascript

css

animation

transitions