Как скрыть HTML-элементы на время, не занимая места? - PullRequest
Новая
       13

Как скрыть HTML-элементы на время, не занимая места?

0 голосов
/ 23 марта 2019

У меня есть следующая страница: 

<div class="background">
        <section class="statements">
            <article>
                <div class="article_background hidden" id="forge"></div>
                <p>
                    Greek Mythology states that Hephaistos was the god of blacksmiths, metalworking, carpenters,
                    craftsmen, artisans, sculptors, metallurgy, fire, and volcanoes.
                    During his lifetime he accomplished the creation of wonderous items; Achilles armor, Hermes winged
                    helmet and sandals, even going as far as to create automatons to work for him.
                </p>
            </article>
        </section>
</div>

и я хочу сделать его невидимым. Я пробовал с visibility, проблема в том, что он все еще занимает место.

Я довольно много пробовал с display и visibility, но результат никогда не был тем, на что я надеялся.

Я пытаюсь сделать это в чистом CSS

Ответы [ 2 ]

0 голосов
/ 23 марта 2019

Вам просто нужно display:none, чтобы скрыть элемент, и display:block или display:inline (в зависимости от того, с каким элементом вы работаете), чтобы показать его снова.Или, на самом деле, вы можете просто применить display:none к элементу, а затем удалить это приложение, чтобы восстановить предыдущий стиль.

Что касается временной части, вы можете скрыть ее на определенное количество времени с помощью setTimeout(). 

let theDiv = document.querySelector("div");

document.querySelector("button").addEventListener("click", function(){
  theDiv.classList.add("hidden");    // Hide the element by applying the style
  
  // Then set up a function to run 5 seconds later
  setTimeout(function(){
    theDiv.textContent = "I'm back!";
    theDiv.classList.remove("hidden"); // Remove the class that hides the element
  }, 5000);
});
.hidden { display:none; } /* Will be applied for 5 seconds */
<button>Hide the text for 5 seconds:</button>
<div>Now you see me...</div>
<div>I'll be here the whole time, but I'll move up when the element above me gets hidden and I'll move down when it comes back.</div>
<div class="hidden">You'll never see me</div>
<div>&copy; 2019</div>
0 голосов
/ 23 марта 2019

Эту проблему можно решить без использования js с помощью простой настройки кода: 

.background {
        overflow: hidden;
        visibility: hidden;
        max-height: 0px;
}

.background {
        animation: visibility 0ms 4.5s both;
        -webkit-animation: visibility 0ms 4.5s both;
}

@-webkit-keyframes visibility {
        100% {
                max-height: inherit;
                visibility: visible;
        }
}

@keyframes visibility {
        100% {
                max-height: inherit;
                visibility: visible;
        }
}

Из-за того, что элементы имеют высоту 0 в начале и невидимы, они не занимают места, которое было бы представлено на полосе прокрутки, но все еще загружается при посещении.

Затем эта функция после набора 4.5s снимает ограничения и показывает все в том виде, как она предварительно сконфигурирована в css и html. Надеюсь, это кому-нибудь пригодится!

...