Скрытие объекта за экраном при загрузке страницы - PullRequest
Новая
       0

Скрытие объекта за экраном при загрузке страницы

0 голосов
/ 06 февраля 2020

У меня есть выдвижная функция, которая выдвигает «ящик» сверху / слева / справа / снизу в зависимости от параметров данных. Функция выглядит и работает именно так, как я хочу, за исключением того, что во время загрузки страницы ящик отображается полностью, а затем скользит по месту, а не скрывается, пока пользователь не нажмет кнопку для просмотра ящика.

Я знаю отсрочка загрузки css вызывает проблему, но я хочу сохранить это, но все же решить проблему. Также в моем примере я откладываю CSS, но в моем реальном коде он откладывает таблицу стилей.

Я пробовал кучу разных решений, таких как добавление класса в html с последующим применением только CSS когда HTML имеет этот класс, но это влияет на функциональность, так что я не на 100% о том, как go решить проблему. 

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>

Ответы [ 2 ]

2 голосов
/ 06 февраля 2020

Как я уже упоминал в комментариях, установите встроенный 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>
0 голосов
/ 06 февраля 2020

Скройте его с помощью встроенной таблицы стилей (display: none или opacity: 0) и попросите реальную таблицу стилей переопределить эти правила, чтобы раскрыть ее. Таким образом, он скрыт, пока ваша таблица стилей не загрузится.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...