toggle和layer的显示和隐藏的动画不同步

toggle和layer的显示和隐藏的动画不同步

dropdown-toggle和dropdown-layer的显示和隐藏的动画不同步什么原因？toggle比layer消失的慢

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <div class="nav-site">
        <div class="wrap">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
                <li class="fl"><a href="javascript:;" class="nav-site-signup link">免费注册</a></li>
                <li class="fl"><a href="javascript:;" class="nav-site-mobile link">手机逛慕淘</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-left transition">
                        <li ><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
                        <li ><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li ><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link">商品分类<i class="dropdown-arrow transition"></a>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">免费开店</a></li>
                        <li><a href="###" target="_blank" class="menu-item">已卖出的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">出售中的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家服务市场</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家培训中心</a></li>
                        <li><a href="###" target="_blank" class="menu-item">体验中心</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow transition icon">&#xe638;</i></a>
                    <ul class="dropdown-layer dropdown-right">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
                
            </ul>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.jQuery||document.write('<script src="./JS/jquery.js"><\/script>');
    </script>


    <script src="./JS/transition.js"></script>
    <script src="./JS/showHide.js"></script>
    <script src="./JS/dorpdown.js"></script>
    <script src="./JS/index.js"></script>
    
</body>
</html>

commom.css

.wrap{
    margin: 0 auto;
    width: 1200px;
}

a.link{
    color: #4d555d;
}

a.link:hover{
    /* 链接经过的颜色 */
    color: #f01414;
}

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

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

.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.5s;
}


@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot') format('embedded-opentype'),
        url('../font/iconfont.woff') format('woff'),
        
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg') format('svg');
  }

.icon {
    font-family: "iconfont" !important;
    font-size: 14px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }

  .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;
}


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

index.css

/* nav-site */

.nav-site{
    width:100%;
    background-color: #f3f5f7;
    height: 45px;
}

.nav-site .wrap{
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid #cdd0d4;
}

.nav-site-login{
    color: #f01414;
    margin-left:15px;
}

.nav-site-signup,.nav-site-mobile{
    margin-left: 10px;
}

.nav-site-category{
    margin:0 10px;
}

/* dropdown */
.dropdown{
    position: relative;
}

.dropdown-arrow{
    margin-left: 5px;
    display: inline-block;
}

.dropdown-toggle{
    display: block;
    position: relative;
    padding: 0 13px 0 12px;
    border-left: 1px solid #f3f5f7;
    border-right: 1px solid #f3f5f7;
    border-color: #cdd0d4;
    height: 100%;
}


.dropdown-layer{
    position: absolute;
    /* height: 100%; */
    background-color: #fff;
    border: 1px solid #cdd0d4;
    /* border: 1px solid #828385; */
    display:none;
    overflow: hidden;
}

.menu-item{
    display: block;
    color: #4d555d;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    white-space: nowrap;
    /* border: 1px solid #cdd0d4; */
    /* border-bottom: 1px solid #cdd0d4; */
}


.fr{
    margin-right: 15px;
    height: 44px;
}

.dropdown-left{
    left:0;
}

.dropdown-right{
    right:0;
}

transition.js

(function () {
    var transitionEndEventName={
        transition:'transitionend',
        MozTransition:'transitiond',
        WebkitTransition:'WebkitTransitionEnd',
        OTransition:'oTransitionEnd oTransitionend'
    }

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

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

index.js

(function($) {
    $(".dropdown").dropdown({
        css:true,
        js:true,
        
    });

})(jQuery);

dropdown.js

(function($) {
    'use strict'

    function Dropdown($elem,options){
        this.$elem=$elem;
        this.options=options;
        this.$layer=this.$elem.find('.dropdown-layer')
        this.activeClass=options.active+'-active'
        this._init();
    }

    Dropdown.prototype._init=function () {
        var self = this;
        this.$layer.showHide(this.options);
        this.$layer.on('show shown hide hidden',function(e){
        self.$elem.trigger('dropdonw'+e.type);
        });

        if(this.options.event==='click'){
            this.$elem.on('click',function (e) {
                self.show();
                e.stopPropagation();
            });
            $(document).on('click',this.hide,this);
        }else{
            this.$elem.hover($.proxy(this.show,this),$.proxy(this.hide,this));
        }
    }


    Dropdown.prototype.show=function () {
        var self = this;
        if(this.options.delay){
            this.timer=setTimeout( function() {
                _show();
            }, this.options.delay);
        }else{
            _show();
        }

        function _show(){
            self.$elem.addClass(self.activeClass);
            self.$layer.showHide('show');
            
        }
    }

    Dropdown.prototype.hide=function () {
        if(this.options.delay){
            clearTimeout(this.timer);
        }

        this.$elem.removeClass(this.activeClass);
        this.$layer.showHide('hide');
    }

    Dropdown.DEFAULTS={
        event:"hover",
        css3:'true',
        js:'true',
        animation:'fade',
        delay:'0',
        active:'dropdown'
    };


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

                if(!dropdown){
                $this.data('dropdown',dropdown=new Dropdown($this,options));
                }

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

            });
        }
    });
})(jQuery);

showHide.js
陈立天 2020-05-05
源自：实战：下拉菜单组件化   3-6 改写站点导航中的下拉菜单
13
收起

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

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

4回答
好帮手慕慕子 2020-05-06 20:42:12

同学你好，看同学最后的提问，问题已经解决了是吗？现在就是存在谷歌浏览器本地访问与其他浏览器访问效果不同的问题是吗？如果是这样的话，那么同学就不用纠结了，代码是正确的，出现这种差异是浏览器自身的问题了，推荐同学在chrome浏览器测试时，通过phpstudy打开网页测试。

如果不是的话，可以详细描述下问题，老师会再次帮助您解答的，祝学习愉快~

0
收起回答
提问者 陈立天 2020-05-06 18:55:46

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

这边的代码没有添加定时器。 我用phpstudy 打开网页 ，鼠标滑动 layer 和toggle就可以实现消失和显示同步，但是在本地访问就不同步 为什么会这样？ （chrome浏览器）。 另外在用iE浏览器本地访问也可以同步，唯独chrome本地访问不行。

0
收起回答
提问者 陈立天 2020-05-06 18:44:23 
(function($) {
    var transition =window.mt.transition;

    // init公共部分
    function init($elem,hiddenCallback){
        if($elem.is(':hidden')){
            $elem.data('status','hidde');
            if(typeof hideCallback=='function') hiddenCallback();
            
        }else{
            $elem.data('status','shown');
        }
    }

    // show公共部分
    function show($elem,callback){
        if ($elem.data('status')==='show') return;
        if ($elem.data('status')==='shown') return;
        $elem.data('status','show').trigger('show');
        
        callback();
    }

    // hide公共部分
    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')
            })
        }

        // silent结束
    }

    

    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,'sildeUpDownCollapse');
            },
            show:function($elem){
                css3._show($elem,'sildeUpDownCollapse');
            },
            hide:function($elem){
                css3._hide($elem,'sildeUpDownCollapse');
            }
        },
        // 左右滚动
        slideLeftRight:{
            init:function(){
                $elem.width($elem.width());
                css3._init($elem,'slideLeftRightCollapse');
            },

            show:function($elem){
                css3._show($elem,'slideLeftRightCollapse');
            },

            hide:function(){
                css3._hide($elem,'slideLeftRightCollapse');
            }

             
        },
        // 淡入淡出上下滚动
        fadeslideUpDown:{
            init:function(){
                $elem.height($elem.height());
                css3._init($elem,'fadeOut sildeUpDownCollapse');
            },
            show:function(){
                css3.show($elem,'fadeOut sildeUpDownCollapse');
            },
            hide:function(){
                css3.hide($elem,'fadeOut sildeUpDownCollapse');
            }
        },
        // 淡入淡出左右滚动
        fadeslideLeftRight:{
            init:function(){
                $elem.width($elem.width());
                css3._init($elem,'fadeOut sildeLeftRightCollapse');
            },
            show:function(){
                css3.show($elem,'fadeOut sildeLeftRightCollapse');
            },
            hide:function(){
                css3.hide($elem,'fadeOut sildeLeftRightCollapse');
            }
        }

    }
        // CSS3结束
    css3._init = function($elem,className){
        $elem.addClass('transition');
        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.data('status','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,'slideUpDown');
            },
            hide:function($elem){
                js._show($elem,'slideUpDown');
            }
        },

        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._show=function($elem,mode){
        show($elem,function(){
            $elem.stop()[mode](function(){
                $elem.data('status','shown').trigger('shown');
            });
        });   
    }

    js._hide=function($elem,mode){
        show($elem,function(){
            $elem.stop()[mode](function(){
                $elem.data('status','hidden').trigger('hidden');
            });
        });   
    }

    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._customShow=function($elem){
        show($elem,function(){
            $elem.show();
            $elem.stop().animate($elem.data('styles'),function(){
                $elem.data('status','shown').trigger('shown');
            });
        });
    }

    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){
            mode=css3[options.animation]||css3[defaults.animation]
        }else if(options.js){
            mode=js[options.animation]||js[defaults.animation]
        }else{
            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]();
                    }
            });
        }
    });




})(jQuery);


0
收起回答
  • 提问者 陈立天 #1
    showHide.js已经补充麻烦老师 在看看
    2020-05-06 18:44:51
好帮手慕慕子 2020-05-06 12:00:31

同学你好，可以去掉common.css中给layer设置display:block;属性，通过js设置下拉框显示。如下所示：

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

由于同学没有粘贴showHide.js文件，老师用源码测试下，经过上面的修改后就可以了。

但是因为toggle是直接通过css的过渡实现效果，layer的显示和隐藏是通过js控制添加删除类名实现效果，所以可能会有一定时间误差，不过这个并不影响效果的最终实现。

同学可以在隐藏下拉层时，添加一个定时器，适当的调整元素隐藏过程的时间，让效果实现的更美观，示例：

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

同学可以修改后，清除浏览器缓存再测试下，如果还有问题，可以将你的showHide.js文件也粘贴过来，老师在帮助同学测试下。

祝学习愉快~

0
收起回答
  • 提问者 陈立天 #1
    根据老师的修改了定时器还是一样layer和toggle的显示和消失不同步。 另外在源文件中没有在css._hide里面添加定时器我看到
    2020-05-06 18:41:10
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

为什么我绑定了transition只是没有动画了但还是可以实现显示和隐藏？
16 0 3
显示与隐藏
0 0 4
为啥使用toggle（）方法时代码如此简短？
22 0 3
老师，这里的过渡动画是不是基于元素显示隐藏的情况下而言的？元素没有显示隐藏的过渡动画要怎么做？
6 0 1
为什么我这个代码没有动画效果
1 0 4

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

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

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

 帮助反馈 APP下载

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

 公众号

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

在线咨询

领取优惠

免费试听

领取大纲

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