在页面加载时将对象隐藏在屏幕之外

Question

我有一个滑出功能，可以根据数据参数从上/左/右/下滑出"抽屉"。该函数的外观和工作方式完全符合我的意愿，除了在页面加载期间，抽屉会完整显示，然后滑入到位而不是隐藏，直到用户单击按钮查看抽屉。

我知道延迟加载 css 会导致问题，但我想保留它但仍能解决问题。同样在我的示例中，我推迟了 CSS，但在我的实际代码中，它推迟了样式表。

我已经尝试了很多不同的解决方案，例如向 html 添加一个类，然后仅在 HTML 具有该类但随后功能受到影响时才应用 CSS，所以我不是 100% 了解如何解决问题。

var _slideout = new slideout({
	blur: false,
	overlay: false
});
document.querySelector(".open-sidebar").addEventListener("click",function(el){
	_slideout.open(document.querySelector(".open-sidebar").getAttribute("data-id"));
	el.preventDefault();
});
function slideout(p){
	var defaults = {
		"overlay" : true,
		"blur" : false,
		"activeId": "",
		"overlayElement": "",
		"activeElement": ""
	};
	
	var config = Object.assign(defaults,p);
	var pageRootElement = document.querySelector('html');
	var _this = this;
	this.init = function(){
		if (config["overlay"]) {
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');
if (mainContent) {
mainContent.classList.add('slideout_blur');
}
}
this.bindEvents();
	};
	
	this.bindEvents = function(){
var triggers = document.querySelectorAll('[data-slideout-target]');
var closers = document.querySelectorAll('[data-slideout-close]');

		triggers.forEach(function(trigger){
			trigger.addEventListener('click', function(e){
				_this.handleOpenEvent(e);
			});
		});
		
		closers.forEach(function(closer){
			closer.addEventListener('click', function(e){
				_this.handleCloseEvent(e);
			});
		});
		
		
if (config["overlayElement"] != "") {
			config["overlayElement"].addEventListener('click', function(e){
				_this.handleCloseEvent(e);
			});
}
		
		document.addEventListener('keyup', function(e){
			_this.handleCloseEvent(e);
		});
}
	
	this.create_event = function(_event){
		var event = new CustomEvent(_event, { bubbles: true, detail: { element: config["activeElement"], id: config["activeId"] } });
config["activeElement"].dispatchEvent(event);
	}
this.handleOpenEvent = function(e) {
e.preventDefault();
var slideoutId = e.currentTarget.getAttribute('data-slideout-target');
this.open(slideoutId);
}
this.handleCloseEvent = function(e) {
e.preventDefault();
this.close();
}
this.handleKeyEvent = function(e) {
if (e.keyCode === 27) this.close();
}
this.open = function(slideoutId) {
if (config["activeId"] === String(slideoutId) || !slideoutId) return;
if (config["activeId"] && config["activeId"] !== String(slideoutId)) this.close();
config["activeId"] = slideoutId;
config["activeElement"] = document.querySelector('[data-slideout-id="' + config["activeId"] + '"]');
if (!config["activeElement"]) return;
this.create_event('slideout_opening');
config["activeElement"].classList.add('opened');
		pageRootElement.classList.add('slideout_locked');
pageRootElement.setAttribute('slideout', slideoutId);
}
this.close = function() {
if (!config["activeId"]) return;
this.create_event('slideout_closing');
config["activeElement"].classList.remove('opened');
pageRootElement.classList.remove('slideout_locked');
pageRootElement.removeAttribute('slideout');
config["activeId"] = null;
config["activeElement"] = null;
}
	
	this.init();
	
	return this;
}
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);
};
	  
	  
		var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
		 if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0);});
else loadDeferredStyles();
	

	 <noscript id="deferred-styles">
<style>
/*@media screen and (max-width: 550px) {*/
	html.slideout_locked {
		overflow: hidden;
		-ms-touch-action: none;
		touch-action: none;
	}
	.slideout_locked .slideout_main_content.slideout_blur {
		filter: blur(15px);
	}
	.slideout_overlay {
		z-index: -999;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		will-change: opacity;
		transition: opacity 0.5s ease;
		opacity: 0;
		background: #3c3442;
	}
	html.slideout_locked .slideout_overlay {
		opacity: 0.8;
		z-index: 999;
	}
	
	[data-slideout-id]{
		position: fixed;
		overflow-y: auto;
		will-change: transform;
		transition: transform 0.5s ease;
		background: #fff;
		z-index: 2000;
	}
	[data-slideout-direction="left"][data-slideout-id], [data-slideout-direction="right"][data-slideout-id] {
		top: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
	}
	[data-slideout-direction="top"][data-slideout-id], [data-slideout-direction="bottom"][data-slideout-id] {
		left: 0;
		width: 100%;
		min-height: 150px;
	}
	
	[data-slideout-direction="left"][data-slideout-id] {
		left: 0;
		transform: translateZ(0) translateX(-100%);
	}
	[data-slideout-direction="right"][data-slideout-id] {
		right: 0;
		transform: translateZ(0) translateX(100%);
	}
	[data-slideout-direction="top"][data-slideout-id] {
		top: 0;
		transform: translateZ(0) translateY(-100%);
	}
	[data-slideout-direction="bottom"][data-slideout-id] {
		bottom: 0;
		transform: translateZ(0) translateY(100%);
	}
	[data-slideout-id].opened {
		display: block;
		transform: translateX(0px) translateY(0px);
	}
	
	[data-slideout-id] .close {
		width: 30px;
		height: 31px;
		position: relative;
		display: inline-block;
		vertical-align: text-bottom;
		text-align: center;
		cursor: pointer;
	}
	[data-slideout-id] .close:before, [data-slideout-id] .close:after {
		position: absolute;
		left: 10px;
		content: ' ';
		height: 31px;
		width: 3px;
		background-color: #000;
	}
	[data-slideout-id] .close:before {
		transform: rotate(45deg);
	}
	[data-slideout-id] .close:after {
		transform: rotate(-45deg);
	}

.slidebar{
border-right:1px solid #000000;
}
/*}*/
</style>
</noscript>
<button data-id="sidebar" class="open-sidebar btn" type="button">&#9776;SERVICES</button>
<div class="slidebar" data-slideout-id="sidebar" data-slideout-direction="left">
		<div class="visible-xs title"><span data-slideout-close class="pull-right close"></span> OUR SERVICES</div>
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar 
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar 
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar 
</div>

Answer 1

正如我在评论中提到的，设置内联 css 以隐藏元素，然后在 js 中您可以删除内联样式，使其顺利运行

var _slideout = new slideout({
blur: false,
overlay: false
});
document.querySelector(".open-sidebar").addEventListener("click", function(el) {
_slideout.open(document.querySelector(".open-sidebar").getAttribute("data-id"));
el.preventDefault();
});
function slideout(p) {
var defaults = {
"overlay": true,
"blur": false,
"activeId": "",
"overlayElement": "",
"activeElement": ""
};
var config = Object.assign(defaults, p);
var pageRootElement = document.querySelector('html');
var _this = this;
this.init = function() {
if (config["overlay"]) {
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');
if (mainContent) {
mainContent.classList.add('slideout_blur');
}
}
this.bindEvents();
};
this.bindEvents = function() {
var triggers = document.querySelectorAll('[data-slideout-target]');
var closers = document.querySelectorAll('[data-slideout-close]');
triggers.forEach(function(trigger) {
trigger.addEventListener('click', function(e) {
_this.handleOpenEvent(e);
});
});
closers.forEach(function(closer) {
closer.addEventListener('click', function(e) {
_this.handleCloseEvent(e);
});
});
if (config["overlayElement"] != "") {
config["overlayElement"].addEventListener('click', function(e) {
_this.handleCloseEvent(e);
});
}
document.addEventListener('keyup', function(e) {
_this.handleCloseEvent(e);
});
}
this.create_event = function(_event) {
var event = new CustomEvent(_event, {
bubbles: true,
detail: {
element: config["activeElement"],
id: config["activeId"]
}
});
config["activeElement"].dispatchEvent(event);
}
this.handleOpenEvent = function(e) {
e.preventDefault();
var slideoutId = e.currentTarget.getAttribute('data-slideout-target');
this.open(slideoutId);
}
this.handleCloseEvent = function(e) {
e.preventDefault();
this.close();
}
this.handleKeyEvent = function(e) {
if (e.keyCode === 27) this.close();
}
this.open = function(slideoutId) {
if (config["activeId"] === String(slideoutId) || !slideoutId) return;
if (config["activeId"] && config["activeId"] !== String(slideoutId)) this.close();
config["activeId"] = slideoutId;
config["activeElement"] = document.querySelector('[data-slideout-id="' + config["activeId"] + '"]');
if (!config["activeElement"]) return;
this.create_event('slideout_opening');
config["activeElement"].classList.add('opened');
pageRootElement.classList.add('slideout_locked');
pageRootElement.setAttribute('slideout', slideoutId);
}
this.close = function() {
if (!config["activeId"]) return;
this.create_event('slideout_closing');
config["activeElement"].classList.remove('opened');
pageRootElement.classList.remove('slideout_locked');
pageRootElement.removeAttribute('slideout');
config["activeId"] = null;
config["activeElement"] = null;
}
this.init();
return this;
}
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement)
addStylesNode.parentElement.removeChild(addStylesNode);

// remove inline styles
document.querySelector(".slidebar").style = "";
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function() {
window.setTimeout(loadDeferredStyles, 0);
});
else loadDeferredStyles();

<noscript id="deferred-styles">
<style>
/*@media screen and (max-width: 550px) {*/
	html.slideout_locked {
		overflow: hidden;
		-ms-touch-action: none;
		touch-action: none;
	}
	.slideout_locked .slideout_main_content.slideout_blur {
		filter: blur(15px);
	}
	.slideout_overlay {
		z-index: -999;
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		will-change: opacity;
		transition: opacity 0.5s ease;
		opacity: 0;
		background: #3c3442;
	}
	html.slideout_locked .slideout_overlay {
		opacity: 0.8;
		z-index: 999;
	}
	
	[data-slideout-id]{
		position: fixed;
		overflow-y: auto;
		will-change: transform;
		transition: transform 0.5s ease;
		background: #fff;
		z-index: 2000;
	}
	[data-slideout-direction="left"][data-slideout-id], [data-slideout-direction="right"][data-slideout-id] {
		top: 0;
		width: 100%;
		max-width: 100%;
		height: 100%;
	}
	[data-slideout-direction="top"][data-slideout-id], [data-slideout-direction="bottom"][data-slideout-id] {
		left: 0;
		width: 100%;
		min-height: 150px;
	}
	
	[data-slideout-direction="left"][data-slideout-id] {
		left: 0;
		transform: translateZ(0) translateX(-100%);
	}
	[data-slideout-direction="right"][data-slideout-id] {
		right: 0;
		transform: translateZ(0) translateX(100%);
	}
	[data-slideout-direction="top"][data-slideout-id] {
		top: 0;
		transform: translateZ(0) translateY(-100%);
	}
	[data-slideout-direction="bottom"][data-slideout-id] {
		bottom: 0;
		transform: translateZ(0) translateY(100%);
	}
	[data-slideout-id].opened {
		display: block;
		transform: translateX(0px) translateY(0px);
	}
	
	[data-slideout-id] .close {
		width: 30px;
		height: 31px;
		position: relative;
		display: inline-block;
		vertical-align: text-bottom;
		text-align: center;
		cursor: pointer;
	}
	[data-slideout-id] .close:before, [data-slideout-id] .close:after {
		position: absolute;
		left: 10px;
		content: ' ';
		height: 31px;
		width: 3px;
		background-color: #000;
	}
	[data-slideout-id] .close:before {
		transform: rotate(45deg);
	}
	[data-slideout-id] .close:after {
		transform: rotate(-45deg);
	}

.slidebar{
border-right:1px solid #000000;
}
/*}*/
</style>
</noscript>
<button data-id="sidebar" class="open-sidebar btn" type="button">&#9776;SERVICES</button>
<!-- added inline styles here -->
<div class="slidebar" data-slideout-id="sidebar" data-slideout-direction="left" style="transform: translateZ(0) translateX(-100%);">
<div class="visible-xs title"><span data-slideout-close class="pull-right close"></span> OUR SERVICES</div>
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar
</div>

Answer 2

通过内联样式表(display: none或opacity: 0(隐藏它，并让你的真实样式表覆盖这些规则以显示它。这样，它将被隐藏，直到您的样式表加载。