为什么点击没效果?

js代码、、

建议小白路径实战演练和h5实战演练由JS女老师来讲。作为一名从小白课程到H5课程进阶过来的粉丝，每次前面都是讲得非常不错，到了后面课质量就有点下降，移动端课程还没有购买，不知道实战演练讲得怎么样。如果还是这样的话就粉转黑了。每次听到实战演练都太费劲了，是我太笨？还是其他同学都彻底懂了？

var screenAnimateElements={

'.screen-1':[

'.screen-1-heading',

'.screen-1-phone',

'.screen-1-shadow',

]

}

function setScreenAnimate(screenCls) {

var screen=document.querySelector(screenCls);

var animateElements = screenAnimateElements[screenCls];

var isSetAnimateClass=false;

var isAnimateDone=false;

screen.onclick=function(){

if(isSetAnimateClass===false){

for(var i=0;i<animateElements.length;i++){

var element=document.querySelector(animateElements[i]);

var baseCls=element.getAttribute('class');

element.setAttribute('class',baseCls+' '+animateElements[i].substr(1)+'-animate-init')

}

isSetAnimateClass=true;

return;

}

if(isAnimateDone===false){

var element=document.querySelector(animateElements[i]);

var baseCls=element.getAttribute('class');

element.setAttribute('class',baseCls.replace('-animate-init','-animate-done'))

}

}

}

setScreenAnimate();

动画css样式//

.screen-1-heading{

transition:all 1s;

}

.screen-1-heading-animate-init{

opacity: 0;

transform: translate(0,100%); /* 默认样式 */

}

.screen-1-heading-animate-done{   

opacity: 1;

transform:translate(0,0); 

}

html代码

<div class="screen-1">

<div class="screen-1-heading screen-1-heading-animate-init"><span>慕课手机</span> 让你的生活更精彩</div>

<div class="screen-1-phone"></div>

<div class="screen-1-shadow"></div>

</div>

静态页面css样式//

.screen-1{

height: 800px;

background:url(../img/bg-screen-1.png) no-repeat;

background-size: cover;

position: relative;

overflow: hidden;

}

.screen-1-heading{

font-size:46px;

text-align: center;

color:#4d555d;

padding-top: 152px;

font-style: normal;

}

.screen-1-heading span{

color: #f01400;

}