为什么class里还是会有fadeOut这个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 400px;
            margin: 0 auto;
        }
        button{
            width: 50%;
            height: 50px;
        }
        div{
            width: 100%;
            height:200px;
            background-color: red;
            display: none;
        }
        .transition{
            -o-transition: all .5s;
            -ms-transition: all .5s;
            -moz-transition: all .5s;
            -webkit-transition: all .5s;
            transition: all .5s;
        }
        .fadeOut{
            visibility: hidden;
            opacity: 0;
        }
        .slideUpDownCollapse{
            height: 0;
        }
    </style>
</head>
<body>
    <button class="show">显示</button><button class="hide">隐藏</button>
    <div id="box"></div>
    <button class="show">显示2</button>


    <script src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>
    <script src="transition.js"></script>
    <script src="showHide.js"></script>
    
    <script>

        $box.on('show shown hide hiden',function(e){
            console.log(e);
            if(e.type === 'show'){
                $box.html('<p>我要显示了</p>');
            }else if(e.type === 'shown'){
                setTimeout(function(){
                $box.html($box.html()+'<p>我已经显示了</p>');
            },1000);
            }
        })

        $box.on('show shown hide hiden',function(e){
            if(e.type === 'show'){
                $box.css('background-color','yellow');
            }else if(e.type === 'shown'){
                setTimeout(function(){
                $box.css('background-color','');
            },1000);
            }
        })

        css3.slideUpDown.init($box);
        $('.show').on('click',function(){
            css3.slideUpDown.show($box);
        })
        $('.hide').on('click',function(){
            css3.slideUpDown.hide($box);
        })
    </script>
</body>
</html>

var $box = $('#box');
var transition = window.mt.transition;

//封装初始化
function init($elem,hiddenCallback){
    if($elem.is(':hidden')){
        $elem.data('status','hiden');
        if(typeof hiddenCallback  === 'function') hiddenCallback();
        $elem.addClass('fadeOut');
    }else{
        $elem.data('status','shown');
    }
}

//封装显示
function show($elem,callback){
    //判断现在是什么状态，避免能多次点击
    if($elem.data('status') === 'show') return;
    if($elem.data('status') === 'shown') return;

    //自定义属性，开始显示
    $elem.data('status','show').trigger('show');
    callback();
}

//封装隐藏
function hide($elem,callback){
    if($elem.data('status') === 'hide') return;
    if($elem.data('status') === 'hiden') return;

    $elem.data('status','hide').trigger('hide');
    callback();
}


var silent = {
    init:init,
    show:function($elem){
        show($elem,function(){
        $elem.data('status','shown').trigger('shown');
        $elem.show();
        })
    },
    hide:function($elem){
        hide($elem,function(){
            $elem.hide();
            $elem.data('status','hiden').trigger('hiden');
        })
    }
};
var css3 = {
        //淡入淡出
        fade:{
            //初始化，页面刚出来的时候是隐藏状态
            init:function($elem){
                $elem.addClass('transition');
                init($elem,function(){
                    $elem.addClass('fadeOut');
                })
            },
            show:function($elem){
                show($elem,function(){
                    $elem.off(transition.end).one(transition.end,function(){
                        $elem.data('status','shown').trigger('shown');
                    })
                    //先显示，随后立即移除fadeOut，有淡入淡出的效果并且会把位置占上
                    $elem.show();
                    setTimeout(function(){
                        $elem.removeClass('fadeOut');
                    },20); 
                })
            },
            hide:function($elem){
                hide($elem,function(){
                    $elem.off(transition.end).one(transition.end,function(){
                        $elem.hide();
                        $elem.data('status','hiden').trigger('hiden');
                    });
                    $elem.addClass('fadeOut'); 
                }) 
            }
        },
        //从下到上
        slideUpDown:{
            init:function($elem){
                $elem.addClass('transition');
                init($elem,function(){
                    $elem.addClass('slideUpDownCollapse');
                })
            }, 
            show:function($elem){
                show($elem,function(){
                    $elem.off(transition.end).one(transition.end,function(){
                        $elem.data('status','shown').trigger('shown');
                    })
                    $elem.show();
                    setTimeout(function(){
                        $elem.removeClass('slideUpDownCollapse');
                    },20); 
                })
            },
            hide:function($elem){
                hide($elem,function(){
                    $elem.off(transition.end).one(transition.end,function(){
                        $elem.hide();
                        $elem.data('status','hiden').trigger('hiden');
                    });
                    $elem.addClass('slideUpDownCollapse'); 
                }) 
            }
        },
        //从左到右
        slideLiftRight:{
            show:function(){

            },
            hide:function(){

            }
        }
};
var js = {
    fade:{
        show:function(){

        },
        hide:function(){

        }
    },
    slideUpDown:{
        show:function(){

        },
        hide:function(){

        }
    },
    slideLiftRight:{
        show:function(){

        },
        hide:function(){

        }
    }
};

(function(){
    var transitionEndEventName = {
        transition:'transitionend',
        MozTransition:'transitionend',
        WebkitTransition:'webkitTransitionend',
        Otransition:'oTransitionend otransitionend',
    };
    var transitionEnd = '';  //设置一个变量用来接受游览器支持的transition
    var isSupport = false;  //查看transition是否为真，默认为假

    for(var name in transitionEndEventName){
        if(document.body.style[name] !== undefined){
            transitionEnd = transitionEndEventName[name];
            isSupport = true;
            break;
        }
    }

    window.mt = window.mt || {};
    window.mt.transition = {
        end:transitionEnd,
        isSupport:isSupport
    };
})()