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

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

image-20221025160239176

关键点

  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>
posted @ 2022-10-25 16:20  STR少寒  阅读(172)  评论(0编辑  收藏  举报