此方法可行：
// 获取元素
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 = getElement(screenCls) ; //获取当前屏元素
    var screen = document.querySelector(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);有什么不同，谢谢。