Javascript 动画搜索栏切换点击功能

这是我的切换搜索栏的代码，我只想添加动画，如向下滑动、淡入淡出、轻松等

示例或参考站点可以是此站点

var searchContainer=document.querySelector（“搜索容器”）；
var mainwrap=document.querySelector（“.nav区域”）；
var openSearch=document.querySelector（“ll搜索图标”）；
var closeSearch=document.querySelector（“搜索关闭”）；
var searchInput=document.querySelector（“.searchInput”）；
函数open（）{
mainwrap.classList.add（“移动”）；
searchContainer.style.zIndex=“3000”；
searchInput.focus（）；
}
函数关闭（）{
mainwrap.classList.remove（“移动”）；
searchContainer.style.zIndex=“0”；
}
函数toggleSearch（）{
openSearch.addEventListener（'单击'，打开）；
closeSearch.addEventListener（“单击”，关闭）；
}
切换搜索（）
/*=================================
主航区
================================= */
.导航区{
字体系列：“Roboto”，无衬线；
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：75px；
位置：相对位置；
z指数：1030；
}
.导航区.标志a{
显示器：flex；
对齐项目：居中；
}
.nav区域。标志a svg{
宽度：自动；
高度：40px；
填充：#ffffff；
}
.中央导航{
右边距：自动；
左边距：自动；
}
.中央导航a{
位置：相对位置；
颜色：#ffffff；
文字装饰：无；
填充：28px 10px；
字体大小：16px；
字体系列：“Roboto”，无衬线；
字体重量：较轻；
}
.中央导航a:之后，
.中央导航a:之前{
过渡：全部5秒；
}
.中央导航a:之后{
位置：绝对位置；
底部：0；
左：0；
右：0；
保证金：自动；
宽度：0；
内容：‘’；
颜色：透明；
背景#ca49d9；
背景：-moz线性梯度（左，#ca49d9 0%，#1771A8 100%）；
背景：-webkit线性梯度（左，#ca49d9 0%，#1771A8 100%）；
背景：线性梯度（向右，#ca49d9 0%，#1771A8 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ca49d9'，endColorstr='#1771A8'，GradientType=1）；
高度：4px；
}
.中心导航a:悬停：后{
宽度：100%；
}
.中央导航a：悬停{
文字装饰：无；
}
.中心导航a:非（：最后一个子项）{
右边距：5em；
}
.右导航{
显示器：flex；
对齐项目：居中；
}
.右导航btn提交{
字体系列：“Roboto”，无衬线；
背景：#ffffff；
填充：.5em2em；
-webkit边界半径：2px；
-moz边界半径：2px；
边界半径：1px；
颜色：#787878；
文字装饰：无；
}
.右导航btn提交：悬停{
颜色：#6161；
}
.右导航svg{
宽度：20px；
高度：自动；
填充：#ffffff；
}
.右导航a{
颜色：#ffffff；
文字装饰：无；
字体大小：16px；
字体系列：“Roboto”，无衬线；
}
.右导航a:悬停{
文字装饰：无；
颜色：#ffffff；
}
.右导航a:未（.btn提交）{
右边距：2米；
}
.粘的{
位置：固定；
排名：0；
左：0；
宽度：100%；
背景：#ffffff；
盒影：0 4px2px-2pRGBA（0,0,0,0.1）；
}
.粘性.导航区{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：65px；
弯曲方向：行；
}
.粘性a{
颜色：#6565；
}
.a:悬停{
颜色：#6565；
}
.sticky.logo a svg{
显示：内联块；
填充物：#888A8C；
}
.sticky.logo a svg#XMLID_1_{
填充：#9750DC；
}
.sticky.btn提交{
背景#2452a2；
颜色：#ffffff；
-webkit盒阴影：0 1px 1px rgba（0,0,0,0.1）；
-moz盒阴影：0 1px 1px rgba（0,0,0,0.1）；
长方体阴影：0 1px 1px rgba（0,0,0,0.1）；
}
.sticky.btn提交：悬停{
颜色：#ffffff；
}
.sticky.右导航a svg{
填充：#2452a2；
}
.sticky.m-nav svg{
填充：#2452a2；
}
m-nav{
光标：指针；
填充：#ffffff；
}
.m-nav svg{
显示：内联块；
宽度：22px！重要；
高度：自动；
垂直对齐：中间对齐；
}
.mnav覆盖{
身高：0；
宽度：100%；
位置：固定；
z指数：2090；
排名：0；
左：0；
背景：#0c1476；
/*旧浏览器的回退*/
背景：-webkit线性梯度（135度，#0c1476，#680fac 60%）；
/*Chrome 10-25，Safari 5.1-6*/
背景：线性梯度（135度，#0c1476，#680fac 60%）；
/*W3C、IE 10+/Edge、Firefox 16+、Chrome 26+、Opera 12+、Safari 7+*/
溢出y：隐藏；
过渡：0.5s；
}
.移动导航{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
身高：100%；
}
.移动导航a img{
边框底部：1px实心#ddd；
垫底：10px；
宽度：120px；
高度：自动；
}
.mnav覆盖层a{
字体系列：“Roboto”，无衬线；
填充：8px；
文字装饰：无；
字体大小：22px；
颜色：#ffffff；
显示：块；
过渡：0.3s；
}
.MNA：悬停，
.MNA：聚焦{
颜色：#f1f1；
文字装饰：无；
}
.mnav覆盖.closebtn{
位置：绝对位置；
顶部：.8em；
右：.8em；
字体大小：20px；
}
.mnav覆盖。关闭BTN：悬停{
文字装饰：无；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.mnav覆盖{
溢出y：自动；
}
.mnav覆盖层a{
字体大小：20px；
}
.mnav覆盖.closebtn{
字体大小：20px；
字体系列：“Roboto”，无衬线；
顶部：15px；
右：15px；
文字装饰：无；
}
}
@介质（最小宽度：991px）{
m-nav{
显示：无；
}
}
@介质（最大宽度：991px）{
.导航区{
填充：15px；
}
.导航区.标志a{
右边距：5px；
}
.nav区域。标志a svg{
宽度：100px；
高度：自动；
}
.导航区.右导航区{
左边距：自动；
}
.导航区域.右导航btn提交{
填充：8px；
位置：相对位置；
}
.导航区域.右导航a{
字体大小：16px；
}
.导航区域.右导航a:非（：最后一个子项）{
右边距：.6em；
}
.导航区域.右导航a svg{
宽度：16px；
高度：自动；
}
.中央导航{
显示：无；
}
}
@介质（最大宽度：576px）{
.右导航{
左边距：自动；
}
.右导航btn提交{
填充物：5px；
}
.右导航img
#search-container {
  height: 0;
  opacity: 0;
  transition: all 2s ease-in;
}

    function open() {
  mainwrap.classList.add("move");
  searchContainer.style.zIndex = "3000";
  searchContainer.style.height = "75px";
  searchContainer.style.opacity = "1";
  searchInput.focus();
}

function close() {
  mainwrap.classList.remove("move");
  searchContainer.style.height = "0";
  searchContainer.style.zIndex = "0";
  searchContainer.style.opacity = "0";
}