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

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>