css js 通过滚动监听实现搜索框淡入淡出效果实现

css js 通过滚动监听实现搜索框淡入淡出效果实现

关键点

1. 动画效果

   1. 通过给元素添加active的class去匹配 .search.active 的样式类

   2. .search.active ，在搜索框出现的时候，给它添加active，消失时移除

          .search{
            width: 80%;
            padding: 5px;
            transition:all 1s;
            opacity: 0;
          }    
      	.search.active{
            width: 100%;
            transition:all 1s;
            opacity: 1;
          }
      

   3. .class.class和.class .class 区别

      中间没空格的，匹配的是同时拥有classC和classD的元素
      中间有空格的，匹配的是父节点是classA类，子节点是classB类的元素
      

2. 显示与隐藏

   通过给元素添加display:'none'属性

   问题点：display:'none' 是会是元素直接在dom中去除不会占用位置，可能会导致页面重绘，动画效果失效

   解决：先让元素出现，通过setTimeout延时设置动画效果，消失时相反

   其他解决办法可以看css3 动画与display:none冲突的解决方案 (bbsmax.com)

滚动监听

  function myWheel(e) {
    if(e.wheelDelta > 0 && $(this).scrollTop()==0){//兼容IE,Opera,Chrome
      // console.log("已经到顶部");
      document.getElementById('search').style.display = "block";
      //延时100ms设置类
      setTimeout(function(){
        document.getElementById("searchbar").classList.add("active");
      }, 100);

    }else if(e.detail > 0 && $(this).scrollTop()==0){//兼容Firefox
      // console.log("向上滚动");
      document.getElementById('search').style.display = "block";
      //延时100ms设置类
      setTimeout(function(){
        document.getElementById("searchbar").classList.add("active");
      }, 100);
    }else {
      console.log("向下滚动");
      document.getElementById("searchbar").classList.remove("active");
      //延时100ms设置类
      setTimeout(function(){
        document.getElementById('search').style.display = "none";
      }, 100);
    }
  }

  document.getElementById('menuContent').onmousewheel = myWheel;

搜索框样式

  <style type="text/css">
    * {
      box-sizing: border-box;
    }
    .search{
      width: 80%;
      padding: 5px;
      transition:all 1s;
      opacity: 0;
    }

    .search.active{
      width: 100%;
      transition:all 1s;
      opacity: 1;
    }
    .search form {
      position: relative;
      width: 100%;
      margin: 0 auto;
    }

    .search input, button {
      border: none;
      outline: none;
    }

    .search input {
      width: 100%;
      height: 42px;
      padding-left: 13px;
    }

    .search button {
      height: 42px;
      width: 42px;
      cursor: pointer;
      position: absolute;
    }

    /*搜索框1*/
    .bar1 {
      background: #ffffff;
      border-bottom:1px solid #cccccc ;
    }
    .bar1 input {
      border: 2px solid #7BA7AB;
      border-radius: 5px;
      background: #F9F0DA;
      color: #9E9C9C;
    }
    .bar1 button {
      top: 0;
      right: 0;
      background: #42b983;
      border-radius: 0 5px 5px 0;
    }
    .bar1 button:before {
      content: "\f002";
      font-family: FontAwesome;
      font-size: 16px;
      color: #F9F0DA;
    }


  </style>

搜索框

    <div id="search" style="display: none">
      <div class="mm" style="display: flex;justify-content: center;">
        <div id="searchbar" class="search bar1">
          <form>
            <input type="text" placeholder="请输入您要搜索的内容...">
            <button type="submit"></button>
          </form>
        </div>
      </div>
    </div>