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

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

关键点

动画效果

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

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

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

.class.class和.class.class区别

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

显示与隐藏

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

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

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

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

滚动监听

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>