Javascript 页面加载时隐藏屏幕外的对象

我有一个滑动功能，可以根据数据参数从上/左/右/下滑动“抽屉”。该功能的外观和工作方式完全符合我的要求，但在页面加载期间，抽屉会整体显示，然后滑动到位，而不是隐藏，直到用户单击按钮查看抽屉为止

我知道css加载的延迟是导致问题的原因，但我想保留这一点，但仍然可以解决问题。同样在我的示例中，我推迟了CSS，但在我的实际代码中，它推迟了样式表

我尝试过很多不同的解决方案，比如在html中添加一个类，然后在html有该类时才应用CSS，但是功能会受到影响，所以我不是100%地了解如何解决这个问题

var\u滑出=新滑出({
模糊：错，
覆盖：假
});
document.querySelector（“打开侧栏”）.addEventListener（“单击”，函数（el）{
_slideout.open（document.querySelector（“.open边栏”）.getAttribute（“数据id”）；
el.preventDefault（）；
});
功能滑出（p）{
var默认值={
“叠加”：正确，
“模糊”：错误，
“活动ID”：“，
“覆盖物”：“，
“activeElement”：”
};
var config=Object.assign（默认值为p）；
var pageRootElement=document.querySelector（'html'）；
var_this=这个；
this.init=函数（）{
如果（配置[“覆盖”]）{
config[“overlayElement”]=document.createElement（'div'）；
config[“overlayElement”].classList.add（'slideout_overlay'）；
document.querySelector（'body'）.appendChild（config[“overlayElement”]）；
}
if（config.blur）{
var mainContent=document.querySelector（'.slideout_main_content'）；
如果（主要内容）{
mainContent.classList.add（'slideout_blur'）；
}
}
这是bindEvents（）；
};
this.bindEvents=函数（）{
var triggers=document.querySelectorAll（“[data slideout target]”）；
var closers=document.querySelectorAll（“[data slideout close]”）；
触发器。forEach（函数（触发器）{
trigger.addEventListener（'click'，函数（e）{
_本.handleOpenEvent（e）；
});
});
closer.forEach（函数（closer）{
closer.addEventListener（'click'，函数（e）{
_本.handleCloseEvent（e）；
});
});
如果（配置[“覆盖层”]！=“”）{
配置[“overlayElement”].addEventListener（'click'，函数（e）{
_本.handleCloseEvent（e）；
});
}
文件。添加的文件列表器（“键控”，功能（e）{
_本.handleCloseEvent（e）；
});
}
this.create\u event=函数（\u event）{
var event=new CustomEvent（_event，{bubbles:true，detail:{element:config[“activeElement”]，id:config[“activeId”]}）；
配置[“activeElement”].dispatchEvent（事件）；
}
this.handleOpenEvent=函数（e）{
e、 预防默认值（）；
var slideoutId=e.currentTarget.getAttribute（'data-slideout-target'）；
这个。打开（滑出）；
}
this.handleCloseEvent=函数（e）{
e、 预防默认值（）；
这个。关闭（）；
}
this.handleKeyEvent=函数（e）{
如果（e.keyCode==27）这个.close（）；
}
this.open=函数（slideoutId）{
if（config[“activeId”]==字符串（slideoutId）| | |！slideoutId）返回；
if（config[“activeId”]&&config[“activeId”]！==String（slideoutId））this.close（）；
config[“activeId”]=slideoutId；
config[“activeElement”]=document.querySelector（“[data slideout id=“”+config[“activeId”]+”）；
如果（！config[“activeElement”]）返回；
创建事件（“滑出打开”）；
config[“activeElement”].classList.add（'opened'）；
pageRootElement.classList.add（'slideout_locked'）；
setAttribute（'slideout'，slideoutId）；
}
this.close=函数（）{
如果（！config[“activeId”]）返回；
创建事件（“滑动关闭”）；
config[“activeElement”].classList.remove（'opened'）；
pageRootElement.classList.remove（'slideout_locked'）；
pageRootElement.removeAttribute（'slideout'）；
config[“activeId”]=null；
config[“activeElement”]=null；
}
this.init（）；
归还这个；
}
var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else loadDeferredStyles（）；

/*@媒体屏幕和屏幕（最大宽度：550px）{*/
html.slideout\u已锁定{
溢出：隐藏；
-ms触摸动作：无；
触摸动作：无；
}
.滑出锁定。滑出主内容。滑出模糊{
滤镜：模糊（15px）；
}
.滑出覆盖层{
z指数：-999；
位置：固定；
宽度：100%；
身高：100%；
排名：0；
左：0；
将改变：不透明度；
过渡：不透明度0.5s；
不透明度：0；
背景#3c3442；
}
html.slideout\u锁定。slideout\u覆盖{
不透明度：0.8；
z指数：999；
}
[数据滑出id]{
位置：固定；
溢出y：自动；
改变：转变；
转型：转型0.5s轻松；
背景：#fff；
z指数：2000；
}
[数据滑出方向=“左”][数据滑出id]，[数据滑出方向=“右”][数据滑出id]{
排名：0；
宽度：100%；
最大宽度：100%；
身高：100%；
}
[数据滑出方向=“顶部”][数据滑出id]，[数据滑出方向=“底部”][数据滑出id]{
左：0；
宽度：100%；
最小高度：150px；
}
[数据滑出方向=“左”][数据滑出id]{
左：0；
转化：translateZ（0）translateX（-100%）；
}
[数据滑出指令]