为什么控制台不输出hide、hidden、show、shown？

为什么控制台不输出hide、hidden、show、shown？

跟着视频敲代码，我的程序能够实现淡入淡出、上下滑动、左右滑动的效果。但是为什么在谷歌浏览器中，控制台不输出hide、hidden、show、shown？而在IE浏览器中，控制台才输出hide、hidden、show、shown？


这是在Chrome中运行的效果。

http://img1.sycdn.imooc.com//climg/5f3532e60a0a756007270549.jpg


我的谷歌浏览器是最新版本，V84.0

http://img1.sycdn.imooc.com//climg/5f35336d08b9375f07200291.jpg


这是在IE中运行的效果。

http://img1.sycdn.imooc.com//climg/5f3533920a70594407270553.jpg


版本是IE11

http://img1.sycdn.imooc.com//climg/5f3533ba083bc9ea03780283.jpg


我的程序目录如下：

http://img1.sycdn.imooc.com//climg/5f3534580983c6e001670089.jpg


2-7.html如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
   <head>
      <title>2-7-显示和隐藏</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <base target="_blank">
        <link type="text/css" rel="stylesheet" href="../reset.css">
      <style type="text/css">
         button
            {
                margin: 20px;
                width: 100px;
                height: 30px;
            }

            #box
            {
            position: absolute;
                left: 80px;
            top: 80px;
                width: 400px;
                height: 200px;
                background-color: red;
            }

            /* 动画时间 */
            .transition
            {
                -o-transition: all .5s;
                -ms-transition: all .5s;
                -moz-transition: all .5s;
                -webkit-transition: all .5s;
                transition: all .5s;
            }

            /*淡出效果*/
            .fadeOut
            {
                opacity: 0 !important;
                visibility: hidden !important;
            }

            /* 上下滑动隐藏 */
            .slideUpDownCollapse
            {
                height: 0 !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }

         /* 左右滑动隐藏 */
         .slideLeftRightCollapse
         {
            width: 0 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
         }
      </style>
   </head>
   <body>
      <button id="showBtn">show</button>
      <button id="hideBtn">hide</button>
      <div id="box"></div>
      <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
      <script type="text/javascript" src="transition.js"></script>
      <script type="text/javascript" src="showHide.js"></script>
      <script type="text/javascript">
         console.log(window.MUTAO.transitionend);
            console.log(window.MUTAO.isSupported);


            let $box = $("#box"),
                $showBtn = $("#showBtn"),
                $hideBtn = $("#hideBtn");


            // 绑定自定义的4个事件：show、shown、hide、hidden
            $box.on("show shown hide hidden", function(event)
            {
                console.log(event.type);
            });


            /*
             silentAnimation.init($box);

             $showBtn.on("click", function()
             {
             silentAnimation.show($box);
             });

             $hideBtn.on("click", function()
             {
             silentAnimation.hide($box);
             });
             */


            /*
             cssAnimation.fade.init($box);

             $showBtn.on("click", function()
             {
             cssAnimation.fade.show($box);
             });

             $hideBtn.on("click", function()
             {
             cssAnimation.fade.hide($box);
             });
             */


         /*
            cssAnimation.slideUpDown.init($box);

            $showBtn.on("click", function()
            {
                cssAnimation.slideUpDown.show($box);
            });

            $hideBtn.on("click", function()
            {
                cssAnimation.slideUpDown.hide($box);
            });
          */


         /*
         cssAnimation.slideLeftRight.init($box);

         $showBtn.on("click", function()
         {
            cssAnimation.slideLeftRight.show($box);
         });

         $hideBtn.on("click", function()
         {
            cssAnimation.slideLeftRight.hide($box);
         });
          */


         /*
         cssAnimation.fadeSlideUpDown.init($box);

         $showBtn.on("click", function()
         {
            cssAnimation.fadeSlideUpDown.show($box);
         });

         $hideBtn.on("click", function()
         {
            cssAnimation.fadeSlideUpDown.hide($box);
         });
          */


         cssAnimation.fadeSlideLeftRight.init($box);

         $showBtn.on("click", function()
         {
            cssAnimation.fadeSlideLeftRight.show($box);
         });

         $hideBtn.on("click", function()
         {
            cssAnimation.fadeSlideLeftRight.hide($box);
         });
      </script>
   </body>
</html>


transition.js如下：

/**
 *  解决transitionend事件的兼容性问题
 *  **/

// console.log(document.body.style.transition);


(function()
{
    // transitionend事件名
    let transitionendEvent =
        {
            transition: "transitionend",
            MozTransition: "transitionend",
            WebkitTransition: "webkitTransitionEnd",
            OTransition: "oTransitionEnd otransitionend",
        };

    let transitionend = "",
        isSupported = false;

    for (let i in transitionendEvent)
    {
        if (document.body.style[i] !== undefined)
        {
            transitionend = transitionendEvent[i];
            isSupported = true;
            break;
        }
    }

    // 全局变量MUTAO
    window.MUTAO = window.MUTAO || {};

    window.MUTAO =
        {
            transitionend: transitionend,
            isSupported: isSupported,
        };
})();


showHide.js如下：

let silentAnimation =
    {
        // 初始化
        init: init,

        // 显示
        show: function($ele)
        {
            show($ele, function()
            {
                // 调用jQuery的show方法
                $ele.show();

                // 触发自定义的shown事件，设置状态为shown
                $ele.trigger("shown").data("status", "shown");
            });
        },

        // 隐藏
        hide: function($ele)
        {
            hide($ele, function()
            {
                // 调用jQuery的hide方法
                $ele.hide();

                // 触发自定义的hidden事件，设置状态为hidden
                $ele.trigger("hidden").data("status", "hidden");
            });
        },
    };


let cssAnimation =
    {
        _init: function($ele, classname)
        {
            $ele.addClass("transition");

            init($ele, function()
            {
                $ele.addClass(classname);
            });
        },

        _show: function($ele, classname)
        {
            show($ele, function()
            {
                // 动画结束后，触发自定义的shown事件，设置状态为shown
                $ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
                {
                    $ele.trigger("shown").data("status", "shown");
                });

                // 先显示
                $ele.show();

                // 后动画过渡
                setTimeout(function()
                {
                    $ele.removeClass(classname);
                });
            });
        },

        _hide: function($ele, classname)
        {
            hide($ele, function()
            {
                // 然后在动画结束后，隐藏
                $ele.off(window.MUTAO.transitionend).one(window.MUTAO.transitionend, function()
                {
                    $ele.hide();

                    // 触发自定义的hidden事件，设置状态为hidden
                    $ele.trigger("hidden").data("status", "hidden");
                });

                // 先动画过渡
                $ele.addClass(classname);
            });
        },

        // 淡入淡出效果
        fade:
            {
                // 初始化
                init: function($ele)
                {
                    cssAnimation._init($ele, "fadeOut");
                },

                // 淡入
                show: function($ele)
                {
                    cssAnimation._show($ele, "fadeOut");
                },

                // 淡出
                hide: function($ele)
                {
                    cssAnimation._hide($ele, "fadeOut");
                },
            },

        // 上下滑动效果
        slideUpDown:
            {
                // 初始化
                init: function($ele)
                {
                    // 设置高度
                    $ele.height($ele.height());

                    cssAnimation._init($ele, "slideUpDownCollapse");
                },

                // 上下滑动显示
                show: function($ele)
                {
                    cssAnimation._show($ele, "slideUpDownCollapse");
                },

                // 上下滑动隐藏
                hide: function($ele)
                {
                    cssAnimation._hide($ele, "slideUpDownCollapse");
                },
            },

        // 左右滑动效果
        slideLeftRight:
            {
                // 初始化
                init: function($ele)
                {
                    // 设置宽度
                    $ele.width($ele.width());

                    cssAnimation._init($ele, "slideLeftRightCollapse");
                },

                // 左右滑动显示
                show: function($ele)
                {
                    cssAnimation._show($ele, "slideLeftRightCollapse");
                },

                // 左右滑动隐藏
                hide: function($ele)
                {
                    cssAnimation._hide($ele, "slideLeftRightCollapse");
                },
            },

        // 淡入淡出+上下滑动效果
        fadeSlideUpDown:
            {
                // 初始化
                init: function($ele)
                {
                    // 设置高度
                    $ele.height($ele.height());

                    cssAnimation._init($ele, "fadeOut slideUpDownCollapse");
                },

                // 上下滑动显示
                show: function($ele)
                {
                    cssAnimation._show($ele, "fadeOut slideUpDownCollapse");
                },

                // 上下滑动隐藏
                hide: function($ele)
                {
                    cssAnimation._hide($ele, "fadeOut slideUpDownCollapse");
                },
            },

        // 淡入淡出+左右滑动效果
        fadeSlideLeftRight:
            {
                // 初始化
                init: function($ele)
                {
                    // 设置宽度
                    $ele.width($ele.width());

                    cssAnimation._init($ele, "fadeOut slideLeftRightCollapse");
                },

                // 左右滑动显示
                show: function($ele)
                {
                    cssAnimation._show($ele, "fadeOut slideLeftRightCollapse");
                },

                // 左右滑动隐藏
                hide: function($ele)
                {
                    cssAnimation._hide($ele, "fadeOut slideLeftRightCollapse");
                },
            },
    };


let jsAnimation = {};


function init($ele, hiddenCallback)
{
    if ($ele.is(":hidden") || $ele.css("visibility") === "hidden")
    {
        $ele.data("status", "hidden");

        typeof hiddenCallback === "function" ? hiddenCallback() : 1;
    }
    else
    {
        $ele.data("status", "shown");
    }
}


function show($ele, callback)
{
    // 若已显示，则返回
    if ($ele.data("status") === "show" || $ele.data("status") === "shown")
    {
        return;
    }

    // 触发自定义的show事件，设置状态为show
    $ele.trigger("show").data("status", "show");

    callback();
}


function hide($ele, callback)
{
    // 若已隐藏，则返回
    if ($ele.data("status") === "hide" || $ele.data("status") === "hidden")
    {
        return;
    }

    // 触发自定义的hide事件，设置状态为hide
    $ele.trigger("hide").data("status", "hide");

    callback();
}


reset.css如下：

/*
    重置样式
*/

html, body, div, span,
h1, h2, h3, h4, h5, h6, p, pre,
a, address, big, cite, code,
em, img, ins, samp,
b, u, i, small, strike, strong, sub, sup, tt,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, thead, tbody, tfoot, tr, th, td,
article, aside, details,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video
{
    margin: 0;
    padding: 0;
}

body
{
    font-family: "微软雅黑 Microsoft YaHei";
    font-size: 16px;
    color: #000;
    background-color: #FFF;
}

li
{
    list-style-type: none;
}

a
{
    text-decoration-line: none;
}
我学习太差被关起来了 2020-08-13
源自：实战：下拉菜单组件化   2-7 css3实现其他显示隐藏效果
15
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
好帮手慕夭夭 2020-08-14 09:49:10

同学你好，老师这边使用新版谷歌测试，可以正常打印hide,hidden,show,shown。如下图所示：

http://img1.sycdn.imooc.com//climg/5f35ed6009d263a804910194.jpg

http://img1.sycdn.imooc.com//climg/5f35ed6c093b36d207350641.jpg

应该是同学那边的谷歌浏览器有问题，可以卸载重装一下试一试哦。

祝学习愉快~

0
收起回答
  • 提问者 我学习太差被关起来了 #1
    草率了，原因是我的Filter写了transition，忘记清空了。浏览器是没有问题的。
    2020-08-14 15:24:09
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

为什么show shown有没有出来
8 0 3
为什么没有把show shown控制台输出而是输出了hide 才输出shown是不是动画才结束那show的动画怎么没有执行呢
6 0 3
为什么不在网页中输出而在控制台输出？
20 0 3
控制台报错
8 0 5
想问下这里的show 和hide 和 jquery 的show hide 名字一样 不会冲突吗？
17 0 4

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师