老师帮我解答下吧 为什么实现不了淡入淡出效果?

老师帮我解答下吧 为什么实现不了淡入淡出效果?

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>dropDown</title>
    <style>
        .dropdown {
            position: relative;
            /* margin: 150px; */
        }

        .dropdown-toggle {
            position: relative;
            z-index: 2;
        }

        /* 下拉箭头 */
        .dropdown-arrow {
            display: inline-block;
            /* text-align: center; */
            vertical-align: text-top;
            
        }

        .dropdown-layer {
            display: none;
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }

        .dropdown-left {
            left: 0;
            right: auto;
        }

        .dropdown-right {
            right: 0;
            left: auto;
        }

        /* menu dropdown */

        .menu .dropdown-toggle {
            display: block;
            height: 100%;
            padding: 0 16px 0 12px;
            border-left: 1px solid #f3f5f7;
            border-right: 1px solid #f3f5f7;
        }

        .menu .dropdown-arrow {
            margin-left: 5px;
        }

        .menu .dropdown-layer {
            /* top: 44px; */
            top: 100%;
            border: 1px solid #cdd0d4;
            background-color: #fff;
        }

        .menu-item {
            display: block;
            height: 30px;
            padding: 0 12px;
            line-height: 30px;
            white-space: nowrap;
            color: #4d555d;
        }

        .menu-item:hover {
            background-color: #f3f5f7;
        }

        /* css hover 实现显示隐藏 */

        .menu-active .dropdown-toggle {
            background-color: #fff;
            border-color: #cdd0d4;
        }

        /* 下拉箭头效果 */
        [class *= "-active"] .dropdown-arrow {
            -o-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .transition {
            -o-transition: all 0.5s;
            -ms-transition: all 0.5s;
            -moz-transition: all 0.5s;
            -webkit-transition: all 0.5s;
            transition: all 0.3s;
        }
        /* .menu-active .dropdown-layer {
            display: block;
        } */

        /* 显示隐藏效果 */

        .fadeOut {
            visibility: hidden !important;
            opacity: 0 !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>

    <div class="menu dropdown fl" data-active="menu">
        <a href="" class="dropdown-toggle">我的慕淘<i class="iconfont dropdown-arrow transition">&#xe638;</i></a>
        <ul class="dropdown-layer dropdown-left">
            <li><a href="###" class="menu-item">已买到宝贝</a></li>
            <li><a href="###" class="menu-item">我的足迹</a></li>
        </ul>
    </div>


    <script src="./js/jquery.js"></script>
    <script src="./js/transition.js"></script>
    <script src="./js/showHide.js"></script>
    <script src="./js/dropDown.js"></script>
    <script>

        $('.dropdown').dropdown({
            css3: true,
            js: true,
            animation: 'slideUpDown'             
        });
        

    </script>
</body>

</html>

JS showHide

(function ($) {
    'use strict'
    var transition = window.mt.transition;

    function init($elem, hiddenCallback) {
        if ($elem.is(':hidden')) {
            $elem.data('status', 'hidden');
            if (typeof hiddenCallback === 'function') hiddenCallback();
        } else {
            $elem.data('status', 'shown');
        }
    }

    // 提取 show hide 公共部分

    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') === 'hidden') return;
        $elem.data('status', 'hide').trigger('hide');
        callback();
    }

    var silent = {
        init: init,
        show: function ($elem) {
            show($elem, function () {
                $elem.show();
                $elem.data('status', 'shown').trigger('shown');
            });
        },
        hide: function ($elem) {
            hide($elem, function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden')
            });
        }
    };

    var css3 = {
        fade: {
            init: function ($elem) {
                css3._init($elem, 'fadeOut');
            },
            show: function ($elem) {
                css3._show($elem, 'fadeOut')
            },
            hide: function ($elem) {
                css3._hide($elem, 'fadeOut')
            }
        },

        slideUpDown: {
            init: function ($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'slideUpDownCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'slideUpDownCollapse')
            },
            hide: function ($elem) {
                css3._hide($elem, 'slideUpDownCollapse')
            }
        },

        slideLeftRightCollapse: {
            init: function ($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'slideLeftRightCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'slideLeftRightCollapse')
            },
            hide: function ($elem) {
                css3._hide($elem, 'slideLeftRightCollapse')
            }
        },

        fadeslideUpDown: {
            init: function ($elem) {
                $elem.height($elem.height());
                css3._init($elem, 'fadeOut slideUpDownCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'fadeOut slideUpDownCollapse')
            },
            hide: function ($elem) {
                css3._hide($elem, 'fadeOut slideUpDownCollapse')
            }
        },

        fadeslideLeftRight: {
            init: function ($elem) {
                $elem.width($elem.width());
                css3._init($elem, 'fadeOut slideLeftRightCollapse');
            },
            show: function ($elem) {
                css3._show($elem, 'fadeOut slideLeftRightCollapse')
            },
            hide: function ($elem) {
                css3._hide($elem, 'fadeOut slideLeftRightCollapse')
            }
        }
    };

    css3._init = function ($elem, className) {
        $elem.addClass('transiton');
        init($elem, function () {
            $elem.addClass(className);
        })
    };
    css3._show = function ($elem, className) {
        show($elem, function () {
            $elem.off(transition.end).one(transition.end, function () {
                $elem.data('status', 'shown').trigger('shown');
            });
            $elem.show();
            setTimeout(function () {
                $elem.removeClass(className);
            }, 20)
        });

    };
    css3._hide = function ($elem, className) {
        hide($elem, function () {
            $elem.off(transition.end).one(transition.end, function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            })
            $elem.addClass(className);
        });

    };

    var js = {
        fade: {
            init: function ($elem) {
                js._init($elem);
            },
            show: function ($elem) {
                js._show($elem, 'fadeIn');
            },
            hide: function ($elem) {
                js._hide($elem, 'fadeOut')
            }
        },
        slideUpDown: {
            init: function ($elem) {
                js._init($elem);
            },
            show: function ($elem) {
                js._show($elem, 'slideDown');
            },
            hide: function ($elem) {
                js._hide($elem, 'slideUp')
            }
        },
        // 因为jQuery没有封装slideLeftRight 需要自己写的JS动画 
        slideLeftRight: {
            init: function ($elem) {
                js._customInit($elem, {
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0,
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0,
                });
            }
        },
        fadeslideUpDown: {
            init: function ($elem) {
                js._customInit($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 0,
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'opacity': 0,
                    'height': 0,
                    'padding-top': 0,
                    'padding-bottom': 0,
                });
            }
        },
        fadeslideLeftRight: {
            init: function ($elem) {
                js._customInit($elem, {
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0,
                });
            },
            show: function ($elem) {
                js._customShow($elem);
            },
            hide: function ($elem) {
                js._customHide($elem, {
                    'opacity': 0,
                    'width': 0,
                    'padding-left': 0,
                    'padding-right': 0,
                });
            }
        }
    };
    js._init = function ($elem, hiddenCallback) {
        $elem.removeClass('transition');
        init($elem, hiddenCallback);
    };
    js._customInit = function ($elem, options) {
        var styles = {};

        for (var p in options) {
            styles[p] = $elem.css(p);
        }
        $elem.data('styles', styles)

        js._init($elem, function () {
            $elem.css(options);
        })
    };
    js._show = function ($elem, mode) {
        show($elem, function () {
            $elem.stop()[mode](function () {
                $elem.data('status', 'shown').trigger('shown');
            });
        });
    };
    js._customShow = function ($elem) {
        show($elem, function () {
            $elem.show();
            $elem.stop().animate($elem.data('styles'), function () {
                $elem.data('status', 'shown').trigger('shown');
            });
        })
    }
    js._hide = function ($elem, mode) {
        hide($elem, function () {
            $elem.stop()[mode](function () {
                $elem.data('status', 'hidden').trigger('hidden');
            });
        });
    };
    js._customHide = function ($elem, options) {
        hide($elem, function () {
            $elem.stop().animate(options, function () {
                $elem.hide();
                $elem.data('status', 'hidden').trigger('hidden');
            });
        })
    }

    var defaults = {
        css3: true,
        js: true,
        animation: 'fade'
    };

    function showHide($elem, options) {
        var mode = null;

        if (options.css3 && transition.isSupport) {
            // css3 transition
            mode = css3[options.animation] || css3[defaults.animation];
        } else if (options.js) {
            // js animation
            mode = js[options.animation] || js[defaults.animation];
        } else {
            // no animation
            mode = silent;
        }

        mode.init($elem);
        return {
            show: $.proxy(mode.show, this, $elem),
            hide: $.proxy(mode.hide, this, $elem)
        }
    };

    $.fn.extend({
        showHide: function (option) {
            return this.each(function () { 
                var $this = $(this),
                    options = $.extend({}, defaults, typeof option === 'object' && option),
                    mode = $this.data('showHide');

                if (!mode) {
                    $this.data('showHide', mode = showHide($this, options));
                }


                if (typeof mode[option] === 'function') {
                    mode[option]();
                }
            });
        }
    })

    // window.mt = window.mt || {};
    // window.mt.showHide = showHide;
})(jQuery);

JS dropDown

(function ($) {
    'use strict';
    
    function dropdown(elem, options) {
        var $elem = $(elem),
            $layer = $elem.find('.dropdown-layer'),
            activeClass = $elem.data('active') + '-active';
        
        $layer.showHide(options); 
        
        $elem.hover(function () {
            $elem.addClass(activeClass);
            $layer.showHide('show');
        }, function () {
            $elem.removeClass(activeClass);
            $layer.showHide('hide');
        });
    };

    var defaults = {
        css3: true,
        js: true,
        animation: 'slideUpDown'
    };

    $.fn.extend({
        dropdown: function (option) {
            return this.each(function () {
                var options = $.extend({}, defaults, option);
                dropdown(this,options);
            });
        }
    });

    
    
})(jQuery);
琥珀_2020 2019-12-29
源自：实战：下拉菜单组件化   3-1 用showHide改写dropdown模块
28
收起

正在回答

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

6回答
好帮手慕星星 回答被采纳获得+3积分 2019-12-31 09:43:03

同学你好，问题解答如下：

1、移出效果有问题，那么就去相对应的隐藏中找，也就是这里

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

移入移出的时候只输出了111和11：

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

说明绑定的transition.end事件没有进去，那么就需要考虑transition.js文件中问题了，这样按照代码执行顺序，逻辑顺序一点点的去找就好了。

2、fade效果中其实也没有执行transition.end事件，和slideUpDown动画执行过程是一样的，只不过fade效果中有fadeOut类，设置了看不见和透明度为0：

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

这样达到隐藏的效果。

如果同学还有其它问题，建议在问答区新建问答提问，当前问题盖楼较多，不利于同学后期查找复习。如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

1
收起回答
  • 琥珀_2020 提问者 #1
    好的好的 感谢慕星星老师 老师您辛苦了呢!!! 祝老师2020新年快乐啊!!!
    2019-12-31 15:24:29
好帮手慕星星 2019-12-30 10:34:06

同学你好，是transition.js文件中的问题，当前问题中并没有粘贴代码，老师从另一个问题中粘贴的，参考修改：

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

还是单词的问题，少了i字母，导致不生效，下次记得要把文件代码粘贴完整哦。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

1
收起回答
  • 提问者 琥珀_2020 #1
    喔 谢谢老师 辛苦了
    2019-12-30 18:57:44
  • 提问者 琥珀_2020 #2
    对了 老师 我在问个 问题 就是 单词字母拼错 要怎么找到问题 因为有时候这样的 浏览器不会报错 老师是怎么发发现 我的错误的 教教我 OxO
    2019-12-30 18:59:31
  • 提问者 琥珀_2020 #3
    transition: 'transitionend', 还有就是 为什么这句代码错了 会影响 slideUpdown 而fade不会受 影响
    2019-12-30 19:05:24
提问者 琥珀_2020 2019-12-29 19:09:28

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

0
收起回答
  • 提问者 琥珀_2020 #1
    使用 animation: 'slideUpDown' 这个的时候就会出现 而 fade 就不会 这是什么问题呢
    2019-12-29 19:10:22
好帮手慕星星 2019-12-29 19:03:20

你好，老师这边没有出现同学的效果：

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

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

不知道同学是怎么测试出来的，建议描述具体一些，老师这边还原一下。或者清除浏览器缓存重新测试下哦。

祝学习愉快！

1
收起回答
  • 提问者 琥珀_2020 #1
    老师 就是会出现那个一条border
    2019-12-29 19:09:13
提问者 琥珀_2020 2019-12-29 18:43:18

slideUpDown 使用这个效果的时候  

鼠标离开会出现顶部边框 

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

1
收起回答
好帮手慕星星 2019-12-29 18:31:31

同学你好，已经在另一个相似问题中进行了回复，可以查看一下：

http://class.imooc.com/course/qadetail/181988

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

1
收起回答
  • 提问者 琥珀_2020 #1
    对了 老师 使用 slideUpDown 这个效果的时候会有bug
    2019-12-29 18:41:08
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师，为什么我的下拉菜单不显示呢？
20 0 3
演示中图片的淡入淡出效果没有实现
6 0 3
侧边栏淡入淡出效果
0 0 3
为什么我绑定了transition只是没有动画了但还是可以实现显示和隐藏？
16 0 3
老师帮我看下 为啥没有淡入淡出效果
21 0 7

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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