此方法可行：
// 获取元素
var getElement = function(selector){
    return document.querySelector(selector);
}
//强制定义动画效果
var screenAnimateElements = {
    //第一屏有动画的元素
    '.screen-1':[
        '.screen-1_wrap_heading',
        '.screen-1_wrap_subheading',
    ],
         
};
 
function setScreenAnimate(screenCls) {
    var screen = getElement(screenCls) ; //获取当前屏元素
    var animateElements =  screenAnimateElements[screenCls];  //需要设置动画的元素
     
    var isSetAnimateClass = false; // 是否有初始化子元素的样式
 
    var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE？
     
 
    screen.onclick = function(){
 
    //初始化样式
        if( isSetAnimateClass === false){
            //遍历每一屏需要设置动画的元素
            for(var i=0;i<animateElements.length;i++){
                //获取到某一屏的元素
                var element = document.querySelector(animateElements[i]);
                //获取到某一屏的元素的class
                var baseCls =  element.getAttribute('class');
                //创建新的calss(加入初始化状态)，原来的class加上新设置的class名;substr：截取字符串（把class点去掉）
                element.setAttribute('class',baseCls +' '+ animateElements[i].substr(1)+'_animate_init');
            }
            isSetAnimateClass = true;
            return;
        }
        if(isAnimateDone === false){
            for(var i=0;i<animateElements.length;i++){
                var element = document.querySelector(animateElements[i]);
                var baseCls =  element.getAttribute('class');
                //.replace:替换元素，把_animate_init替换成_animate_done
                element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
            }
           
       }
    }
}
 
setScreenAnimate('.screen-1');

按老师写的为什么会报错

var screenAnimateElements = {
    //第一屏有动画的元素
    '.screen-1':[
        '.screen-1_wrap_heading',
        '.screen-1_wrap_subheading',
    ],
         
};
 
function setScreenAnimate(screenCls) {
    
var screen = document.querySelector(screenCls); // 获取当前屏的元素
  var animateElements =  screenAnimateElements[screenCls];
     
    var isSetAnimateClass = false; // 是否有初始化子元素的样式
 
    var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE？
     
 
    screen.onclick = function(){
 
    //初始化样式
        if( isSetAnimateClass === false){
            //遍历每一屏需要设置动画的元素
            for(var i=0;i<animateElements.length;i++){
                //获取到某一屏的元素
                var element = document.querySelector(animateElements[i]);
                //获取到某一屏的元素的class
                var baseCls =  element.getAttribute('class');
                //创建新的calss(加入初始化状态)，原来的class加上新设置的class名;substr：截取字符串（把class点去掉）
                element.setAttribute('class',baseCls +' '+ animateElements[i].substr(1)+'_animate_init');
            }
            isSetAnimateClass = true;
            return;
        }
        if(isAnimateDone === false){
            for(var i=0;i<animateElements.length;i++){
                var element = document.querySelector(animateElements[i]);
                var baseCls =  element.getAttribute('class');
                //.replace:替换元素，把_animate_init替换成_animate_done
                element.setAttribute('class',baseCls.replace('_animate_init','_animate_done'));
            }
           
       }
    }
}
setScreenAnimate('.screen-1');

// 获取元素

var getElement = function(selector){

    return document.querySelector(selector);

}

var screen = getElement(screenCls) ; //获取当前屏元素

和

var screen = document.querySelector(screenCls);有什么不同，谢谢。