shown和hidden问题

来源：2-5 用css3实现淡入淡出效果（2）

猫有一只猫

2019-12-22 14:55:05

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>显示隐藏模块</title>
    <link rel="stylesheet" href="../css/base.css" />
    <style>
        body {
            width: 400px;
            margin: 0 auto;
        }

        .btn {
            width: 50%;
            height: 30px;
        }

        #box {
            display: none;
            /*position: absolute;*/
            /* visibility: hidden;
        opacity: 0;*/
            width: 100%;
            height: 200px;
            background-color: red;
        }

        .transition {
            -o-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }

        .fadeOut {
            visibility: hidden !important;
            opacity: 0 !important;
        }
    </style>
</head>

<body>
    <button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
    <div id="box" class="transition fadeOut"></div>
    <button class="btn">显示2</button>
    <script src="../js/jquery.js"></script>
    <script src="../js/showHide.js"></script>
    <!-- <script>
        var $box = $('#box');
        // silent.init($box);
        $('#btn-show').on('click', function () {
            css3.fade.show($box);
        });
        $('#btn-hide').on('click', function () {
            css3.fade.hide($box);
        });
        $box.on('show shown hide hidden', function (e) {
            console.log(e.type);
        });
    </script> -->
</body>

</html>

var $box = $('#box');
// silent.init($box);
$('#btn-show').on('click', function () {
    css3.fade.show($box);
});
$('#btn-hide').on('click', function () {
    css3.fade.hide($box);
});
$box.on('show shown hide hidden', function (e) {
    console.log(e.type);
});


// 正常显示和隐藏
var silent = {
    //初始化显示和隐藏的状态
    init: function ($elem) {
        if ($elem.is(':hidden')) {
            $elem.data('status', 'hidden');
        } else {
            $elem.data('status', 'shown');
        }
    },
    show: function ($elem) {
        //判断状态，解决重复触发事件  
        if ($elem.data('status') === 'show') return;
        if ($elem.data('status') === 'shown') return;
        //给元素添加状态值
        $elem.data('status', 'show').trigger('show');
        $elem.show();
        $elem.data('status', 'shown').trigger('shown');
    },
    hide: function ($elem) {
        if ($elem.data('status') === 'hide') return;
        if ($elem.data('status') === 'hidden') return;
        $elem.data('status', 'hide').trigger('hide');
        $elem.hide();
        $elem.data('status', 'hidden').trigger('hidden');
    }
};
// 带效果的显示和隐藏，css3实现方法
var css3 = {
    fade: { // 淡入淡出
        show: function ($elem) {
            $elem.trigger('show');
            $elem.on('transitionend', function () {
                $elem.trigger('shown');
            });
            $elem.show();
            setTimeout(function () {
                $elem.removeClass('fadeOut');
            }, 1);
        },
        hide: function ($elem) {
            $elem.trigger('hide');
            $elem.on('transitionend', function () {
                $elem.hide();
                $elem.trigger('hidden');
            });
            $elem.addClass('fadeOut');
        }
    },
    slideUpDown: { // 上下滚动
        show: function () {
        },
        hide: function () {
        }
    },
    slideLeftRight: { // 左右滚动
        show: function () {
        },
        hide: function () {
        }
    },
    fadeslideUpDown: { // 淡入淡出上下滚动
        show: function () {
        },
        hide: function () {
        }
    },
    fadeslideLeftRight: { // 淡入淡出左右滚动
        show: function () {
        },
        hide: function () {
        }
    }
};
// 带效果的显示和隐藏，js实现方法
var js = {
    fade: { // 淡入淡出
        show: function () {
        },
        hide: function () {
        }
    },
    slideUpDown: { // 上下滚动
        show: function () {
        },
        hide: function () {
        }
    },
    slideLeftRight: { // 左右滚动
        show: function () {
        },
        hide: function () {
        }
    },
    fadeslideUpDown: { // 淡入淡出上下滚动
        show: function () {
        },
        hide: function () {
        }
    },
    fadeslideLeftRight: { // 淡入淡出左右滚动
        show: function () {
        },
        hide: function () {
        }
    }
};