老师看下问题(1)

老师看下问题(1)

我的动画函数 css3 的不起作用，js的可以正常使用，谷歌浏览器测试

html

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

       #box {
           /*display: none;!*页面不载入*!*/
           width: 400px;
           height: 200px;
           background-color: red;

       }
       .btn-show,
       .btn-hide {
           width: 50%;
           height: 30px;
       }
       .transition{
           -o-transition: all .5s;
           -ms-transition: all .5s;
           -moz-transition: all .5s;
           -webkit-transition: all .5s;
           transition: all .5s;
       }
       .fadeOut{
           visibility: hidden!important;/*占位，但隐藏时不会触发绑定事件*/
           opacity: 0!important;
       }
       .slidUpDownCollapse{
           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 class="btn-show">显示</button><button class="btn-hide">隐藏</button>
   <div id="box" class="transition"></div>
<!--    <div data-show="show" class="test"></div>-->
</body>
<script src="../plug/jQ/jQuery3.5.1.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<script src="../js/transition.js"></script>
<script src="../js/showHide.js"></script>
<script>
   // var $test = $(".test");
   // $test.data("show","hide");
</script>
<script>
   // console.log(window.mt.transition.end)
   // console.log(window.mt.transition.isSurport)
   var $box = $("#box");
   var btnShow = $(".btn-show")
   var btnhide = $(".btn-hide");
   // console.log(css3._init($box));
   // silent.init($box);
   // btnShow.click(function () {
   //     silent.show($box, function () {
   //         $box.html("<p>我要显示了<\/p>");
   //     }, function () {
   //         setTimeout(function () {
   //             $box.html($box.html() + "<p>我已经显示了<\/p>");
   //         }, 1000)
   //     })
   // })
   // js.fadeLeftRight.init($box);
   // console.log($box.data("style"));
   // var showHide = window.mt.showHide($box,{
   //     css3:true,
   //     animation:"fade"
   // })
  $box.showHide({
       css3:true,
       animation:"fade"
   })
   $box.on("show shown hide hidden", function (e) {
       console.log(e.type);
   })
   btnShow.click(function () {
       // js.slideLeftRight.show($box);
       // showHide.show()
       $box.showHide("show")
   })
   btnhide.click(function () {
       // js.slideLeftRight.hide($box);
       // showHide.hide()
       $box.showHide("hide")
   })

   // // a
   // $box.on("show shown", function (e) {
   //     // console.log(e.type);
   //     if (e.type === "show") {
   //         $box.html("<p>我要显示了<\/p>");
   //     } else if (e.type === "shown") {
   //         setTimeout(function () {
   //             $box.html($box.html() + "<p>我已经显示了<\/p>");
   //         }, 1000)
   //     }
   // })
   // // b
   // $box.on("show shown", function (e) {
   //     // console.log(e.type);
   //     if (e.type === "show") {
   //         $box.css("background-color","yellow");
   //     } else if (e.type === "shown") {
   //         setTimeout(function () {
   //             $box.css("background-color","");
   //         }, 1000)
   //     }
   // })
   // c

</script>
</html>

base.css

/*css reset*/
  /*清除内外边距*/
  body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
  ul, ol, li, dl, dt, dd, /*列表元素*/
  form, fieldset, legend, input, button, select, textarea, /*表单元素*/
  th, td, /*表格元素*/
  pre {
     padding: 0;
     margin: 0;
  }
  html,body{
     width: 100%;
     height: 100%;
  }
  /*重置默认样式*/
  body, button, input, select, textarea {
     /*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
     color: #333;
     font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
     font-size: 100%;
     font-weight: normal;
  }
  em, i {
     font-style: normal;
  }

  a {
     text-decoration: none;
  }
  li {
     list-style-type: none;
     vertical-align: top;
  }
  img {
     border: none;
     /*display: block;*/
     vertical-align: top;
  }
  textarea {
     overflow: auto;
     resize: none;
  }
  table {
     border-spacing: 0;
     border-collapse: collapse;
  }

/*常用公共样式*/
  .fl {
     float: left;
     display: inline;
  }
  .fr {
     float: right;
     display: inline;
  }

showHide.js

(function ($) {
   "use strict";//声明严格模式
   /**
    * window.mt.transition----transition.js内封装，用于接收不同浏览器的transition属性中的transitionend方法名
    */

   var transition = window.mt.transition;//接收变量
   /**
    * 初始化页面，判断当前元素是否显示以及隐藏，根据判断添加自定义属性
    * @param $elem jQuery对象
    * @param initCallback 回调函数，只有传入参数是function类型时才会执行；
    */

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

   /**
    * 全局显示函数封装，用于监听显示动画执行状态时触发的绑定事件，通过设置初始值来避免重复点击时的重复调用
    * @param $elem
    * @param callback 回调函数（选传）
    */

   function show($elem, callback) {
       if ($elem.data("status") === "show") return;
       if ($elem.data("status") === "shown") return;
       /*设置状态，绑定监听*/
       $elem.data("status", "show").trigger("show");
       callback();
   }

   /**
    * 全局显示函数封装，用于监听隐藏动画执行状态时触发的绑定事件，通过设置初始值来避免重复点击时的重复调用
    * @param $elem
    * @param callback 回调函数（选传）
    */

   function hide($elem, callback) {
       if ($elem.data("status") === "hide") return;
       if ($elem.data("status") === "hidden") return;
       $elem.data("status", "hide").trigger("hide");
       callback();
   }

   /**
    * jQ静态动画
    */

   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");
           })
       }
   }
   /**
    * css3动画
    */
   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, "slidUpDownCollapse");
           },
           show: function ($elem) {
               css3._show($elem, "slidUpDownCollapse");
           },
           hide: function ($elem) {
               css3._hide($elem, "slidUpDownCollapse")
           }
       },
       slideLeftRight: {
           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.width($elem.width());
               css3._init($elem, "fadeOut slideLeftRightCollapse");
           },
           show: function ($elem) {
               css3._show($elem, "fadeOut slideLeftRightCollapse");
           },
           hide: function ($elem) {
               css3._hide($elem, "fadeOut slideLeftRightCollapse")
           }
       },
       fadeLeftRight: {
           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")
           }
       }
   };
   /**
    * className用于通过添加类名方式，通过css设置transition
    */
   //css3初始化封装
   css3._init = function ($elem, className) {
       //添加动画时间，此部分需要考虑兼容性前缀
       $elem.addClass("transition")
       //初始化状态，设置css3动画；
       init($elem, function () {
           $elem.addClass(className);
       });
   };
   /**
    * css3显示封装
    * transition.end：通过暴露全局变量的方式，从其他js文件中引入封装后的兼容性不同浏览器的transitionend属性名
    * 由于最开始设置动画元素display：none属性，如果直接不设置setTimeout，会导致动画与显示同时进行，页面不显示动画
    */
   css3._show = function ($elem, className) {
       show($elem, function () {
           /*transitionend为js事件，只有transition执行完毕才会触发，确保上一个过度执行完毕才会触发这个事件*/
           $elem.off(transition.end).one(transition.end, function () {/*使用on绑定会反复的绑定事件,会反复触发事件监听*/
               /*当执行完毕的时候设置属性，绑定监听*/
               $elem.data("status", "shown").trigger("shown");
           })
           $elem.show();/*如果直接从display变化无动画效果，不存在的元素时没有动画效果的*/
           setTimeout(function () {
               $elem.removeClass(className);
           })
       })
   };
   /**
    * css3隐藏封装
    * transition.end：通过暴露全局变量的方式，从其他js文件中引入封装后的兼容性不同浏览器的transitionend属性名
    * 由于最开始设置动画元素display：none属性，如果直接不设置setTimeout，会导致动画与显示同时进行，页面不显示动画
    */
   css3._hide = function ($elem, className) {
       hide($elem, function () {
           /*这样即使点击隐藏，立马点击显示依旧会触发hidden事件，需要每次绑定hidden之前取消上一次事件*/
           $elem.off(transition.end).one(transition.end, function () {
               /*确保隐藏之前已经完全显示，所以需要在上一次动画执行完毕之后再执行hide的操作*/
               $elem.hide();
               // hide()执行完毕之后添加自定义属性，并监听hidden事件；
               $elem.data("status", "hidden").trigger("hidden");
           })
           $elem.addClass(className);
       })
   }
   /**
    * js动画函数
    */
   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")
           }
       },
       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,
                   'padding-top': 0,
                   'padding-bottom': 0,
                   'height': 0
               });
           },
           show: function ($elem) {
               js._customShow($elem);
           },
           hide: function ($elem) {
               js._customHide($elem, {
                   'opacity': 0,
                   'padding-top': 0,
                   'padding-bottom': 0,
                   'height': 0
               })
           }
       },
       fadeLeftRight: {
           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")//初始化移除样式，否则css动画会与js动画冲突；
       init($elem, hiddenCallback);//hiddenCallback 回调函数
   }
   js._customInit = function ($elem, options) {
       //初始化之前首先获取元素初始值
       var styles = {};
       for (var p in options) {
           styles[p] = $elem.css(p);
       }
       //使用$elem.data()方法设置的属性是以data-开头，创建是在内存中，
       // 不会显示在html结构中，但是也会覆盖本身的data-开头相同属性的值，
       //但是在htnl结构中仍旧会显示未覆盖之前的值；
       $elem.data("styles", styles);
       console.log($elem.data("style"));
       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();
           console.log($elem.data("styles"));
           $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: false,
       js: false,
       animation: "fade"
   }

   function showHide($elem, options) {
       console.log(options)
       var mode = null;
       if (options.css3 && transition.isSurport) {
           console.log(options.css3);
           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: mode.show,
           // hide: mode.hide
           //$.proxy()jq方法，可以改变函数的this指向，
           // 并传递参数，函数并不会执行，此方式方便外部调用的时候可以直接执行，不用再次传递参数
           show: $.proxy(mode.show, this, $elem),
           hide: $.proxy(mode.hide, this, $elem)
       }
   }

   $.fn.extend({
       showHide: function (option) {
           // alert(1)
           return this.each(function () {
               var $this = $(this),
                   options = $.extend({}, defaults, typeof option === "object" && option),
                   mode = $this.data("showHide");
                   console.log(mode)
               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)   .cf:before,
  .cf:after {
     content: " ";
     display: table;
     
  }
  .cf:after {
     clear: both;
  }
  .cf {
     *zoom: 1;
  }

transition.js

// //判断浏览器是否支持transition方法
// console.log(document.body.style.transition)//空字符串
// console.log(document.body.style.transitions)//undefined
// //判断浏览器支持属性写法
// console.log(document.body.style)//undefined

// 构建不同浏览器transition完成方法


(function () {
   var transitionEndEventName={
       transition:"transitionend",
       MozTransition:"transitionend",
       WebkitTransition:"webkitTransitionEnd",
       OTransition:"0TransitionEnd otransitionend",
   };
   var isSurport  =false,
       transitonEnd = "";
   for (var name in transitionEndEventName){
       // console.log(transitionEndEventName[name]);
       //中括号中传入变量
       if (document.body.style[name]!==undefined){
           transitonEnd=transitionEndEventName[name];
           isSurport=true;
           break;
       }
   }
   // 将部分变量暴露给全局
   window.mt=window.mt||{};
   window.mt.transition = {
       end:transitonEnd,
       isSurport:isSurport
   };
})()

dropdown.js

(function ($) {
   "use strict";//声明严格模式
   /**
    *
    * @param elem dom元素，当前下拉组件父容器；
    */
   function dropdown(elem) {
       var $elem = $(elem);
       // console.log($elem)
       var $layer = $elem.find(".dropdown-layer");
       // console.log($layer);
       var activeClass = $elem.data("active")+"-active";

       $layer.showHide({
           css3:true,
           js:true,
           animation:"slideLeftRight"
       });
       $elem.hover(function () {
           $elem.addClass(activeClass);
           $layer.showHide("show");
       },function () {
           $elem.removeClass(activeClass);
           $layer.showHide("hide");
       })
   }

   /**
    * $.fn.extend()为jq原型方法，用于jq对象扩展方法，可直接通过. 的方式调用
    */

   $.fn.extend({
       //遍历数组中的每个对象调用dropdown方法
       dropdown:function () {
           // console.log(this)//S.fn.init(2) [div..menu.dropdown.fl, div..menu.dropdown.fl, prevObject: S.fn.init(1)]
           return this.each(function (){
               // console.log(this);//分别为两个下拉组件
               dropdown(this);
           });
       }
   })
})(jQuery)//传入jQuery防止$被覆盖;
vivi_li 2020-05-26
源自：实战：下拉菜单组件化   3-1 用showHide改写dropdown模块
28
收起

正在回答

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

3回答
好帮手慕久久 回答被采纳获得+3积分 2020-05-27 09:37:18

同学你好，在当前的这个代码中，options/option是相同的，可以理解成就是为了区分一下。后面会对传入的参数option进行处理，比如：var options = $.extend({}, defaults, option);），此时options/option可能就不同了。

祝学习愉快！

0
收起回答
好帮手慕久久 2020-05-26 18:01:28

同学你好，老师本地测试你的代码，动画是可以正常执行的，由于fade效果截不出图，所以截了两张“fadeLeftRight”动画：

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

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

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

对于同学的猜测，回答如下：

1. 定时器中不设置时间，也是可以异步执行的，如下：

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

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

所以应该不是它的问题。

2. 元素初始状态是显示的，没有添加fadeOut类，如下：

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

点击隐藏按钮后，元素才被添加上fadeOut类。

另外，同学粘贴的代码中，这个位置是粘贴错了吗？

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

再检查一下，看看是不是这里影响了运行。

如果还是不行，就把代码重新粘一下，老师再测试。

祝学习愉快！

0
收起回答
  • 提问者 vivi_li #1
    可以了又，也许是浏览器缓存问题，我关闭之后再打开就可以了
    2020-05-26 18:17:50
  • 好帮手慕久久 回复 提问者 vivi_li #2
    解决问题就好，祝学习愉快！
    2020-05-26 19:28:44
  • 提问者 vivi_li 回复 好帮手慕久久 #3
    这块有个问题啊，这个传入的options/option 实际上在调用的时候是同一个参数啊，所以起不同的名字只是为了区分开么？ (function ($) { "use strict";//声明严格模式 /** * * @param elem dom元素，当前下拉组件父容器； */ function dropdown(elem,options) { var $elem = $(elem); // console.log($elem) var $layer = $elem.find(".dropdown-layer"); // console.log($layer); var activeClass = $elem.data("active")+"-active"; console.log(options); $layer.showHide(options); $elem.hover(function () { $elem.addClass(activeClass); $layer.showHide("show"); },function () { $elem.removeClass(activeClass); $layer.showHide("hide"); console.log($layer.showHide) }) } /** * $.fn.extend()为jq原型方法，用于jq对象扩展方法，可直接通过. 的方式调用 */ $.fn.extend({ //遍历数组中的每个对象调用dropdown方法 dropdown:function (option) { console.log(option) // console.log(this)//S.fn.init(2) [div..menu.dropdown.fl, div..menu.dropdown.fl, prevObject: S.fn.init(1)] return this.each(function (){ // console.log(this);//分别为两个下拉组件 dropdown(this,option); }); } }) })(jQuery)//传入jQuery防止$被覆盖;
    2020-05-26 22:17:03
提问者 vivi_li 2020-05-26 17:18:27

老师我大概知道原因了 以css3的fade动画为例， 一是封装的_show函数定时器没有写时间，二是页面一加载就直接添加fadeOut类，导致一直就没有取消这个类所以不显示动画，但是我找不到原因啊

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

老师能帮我看下js的问题吗，没法实现
14 0 3
老师帮我看下问题出在哪里
5 0 4
老师有问题
14 0 5
老师帮看下啥问题
3 0 3
1-1问题~
10 0 3

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

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

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

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

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

22 4

2-11检查

78 1

老师，这样对吗

80 1

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

56 1

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

在线咨询

领取优惠

免费试听

领取大纲

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