How to hide elements while preserving animations?

Question

On my app when opened on some mobile phones, due to the virtual keyboard, the screen of the window gets too small, so two elements are blocking the text input, so the user can't see what he is typing.

Is there a way, to delete these two elements while preserving the animation? I tried display: none, but that disabled the animated transition, and opacity: 0, which interact with the touch of the user, that worked with the second one though, but the first one is still a problem.

EDIT: Here is minimal reproducible code for it.

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

const hamburger = document.querySelector(".hamburger"),
      mainMenu = document.querySelector(".main-menu"),
      options = mainMenu.querySelector(".options").querySelectorAll("p");

hamburger.addEventListener("click", function() {
  mainMenu.classList.toggle("active");
  let text = mainMenu.querySelector("p");
  if(text.textContent == "MENU"){
    text.textContent = "ZAVŘÍT";
  } else {
    text.textContent = "MENU";
  }
});

options.forEach(link => {
  link.addEventListener("click", function() {
    mainMenu.classList.remove("active");
    mainMenu.querySelector("p").textContent = "MENU";
  });
});

fulfillSetButton.addEventListener("click", function() {
  document.getElementsByClassName("completion-date")[0].classList.add("active");
})

document.getElementsByClassName("completion-date")[0].lastElementChild.addEventListener(
  "click", function () {
    preventDefault();
    document.getElementsByClassName("completion-date")[0].classList.remove("active");
  }
)

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
  overflow-x: hidden;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

* {

-webkit-tap-highlight-color: transparent;
}

button {

  cursor: pointer;
}

input {

  max-width: 100%;
}

ul {


}
/*-----------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

html {

  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
}

h1 {

  font-size: 2.75rem;
}
/*----------------------------------------------------------------------*/

:root {
  --trans-left:#84fab0;
  --trans-right:#8fd3f4;
  --background: #fff;
  --color: #222;
}

body, button, input {
  color: var(--color);
  background: var(--background);
  transition: all 1s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --color: #fff;
  }
}

/* Stránka */

.page {
  display: none;
  margin-bottom: 5rem;
}

/* šablona na úkoly
      NEMAZAT */

.template {

  display: none;
}

section {

  width: 100vw;
}

input {

  box-shadow: inset 0 3px 7px -3px black;
  border: none;
  line-height: 2rem;
}

button {

  padding: 9px;
  border: none;
  box-shadow: 7px 7px 9px -10px var(--color), inset 0 0 15px -12px var(--color);
  border-radius: 6px;
}

.entry {

  display: flex;
  align-items: flex-end;
  height: 30vh;

  background-image: linear-gradient(120deg, var(--trans-left) 0%, var(--trans-right) 100%);
}

@media screen and (max-height: 660px) {

    .entry {

      height: 38vh;
    }
}

form {

  display: flex;
  flex-wrap: wrap;

  max-width: 36rem;

  justify-content: center;
  margin: 0 auto;
}

form > * {

  max-height: 100%;
}

form > div {

  display: flex;
}

form > input {

  margin: 0.5rem;
  box-shadow: inset 0px 3px 9px -4px #000000;
  border-radius: 6px;
}

.second-item {

  flex-wrap: wrap;
  justify-content: center;
}

.second-item > * {

  margin: 0.5rem;
  box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
  border-radius: 6px;
}

.dropdown-wrap > *:first-child {
  box-shadow: 4px 4px 8px -6px #000000, -4px -4px 10px -3px #FFFFFF;
border-radius: 6px;
}

.btn.dropdown {

  transition: 0.3s ease;
}

.btn.dropdown.low {

  background-color: #84fab0;
}

.btn.dropdown.high {

  background-color: #ffa0a0;
}

.dropdown-menu {

  z-index: 2;
  position: absolute;

  margin-top: 9px;

  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;

  background: #fff;
  box-shadow: 1px 1px 20px -9px black;
  border-radius: 9px;

  pointer-events: none;
  opacity: 0;

  transition: 0.3s ease;
}

.dropdown-menu > li {

  padding: 0.4rem;
  cursor: pointer;
}

.dropdown-menu.show {

  pointer-events: all;
  opacity: 1;
}

.completion-date {

  display: block;
    z-index: 10;
    position: fixed;
    top: -100%;
    left: calc(50% - 121px);
    min-width: max-content;
    padding: 1rem;
    border-radius: 0.5rem;
    background: var(--background);
    text-align: center;
    box-shadow: 0 0 18px -6px var(--color);
    transition: 0.3s;
}

.completion-date.active {

  top: calc(50% - 264px);
}

.completion-date div {

    margin: 0.5rem;
}

.completion-date input,
.completion-date button {

    margin: auto 0;
}

.completion-date input {

  width: 2rem;
  text-align: center;
}

.completion-date div > button {

  width: 1.5rem;
  margin: auto 3px;
  box-shadow: none;
  font-weight: bold;
}

/* Hlavní menu */
.main-menu{
  z-index: 10;
  position: fixed;
  top: calc(100% - 4rem);
  width: 100%;
  height: 100vh;
  text-align: center;
  transition: 0.3s ease;
}

.main-menu.active {
  top: 0;
}

.main-menu > .hamburger {
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.5rem 0;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 0 8px -4px var(--color);
  background: var(--background);
  transition: 0.3s ease;
}

.main-menu > .hamburger > p {
  margin-block-start: 0;
  margin-block-end: 0;
}

.main-menu > .options {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: calc(100vh - 4rem);
  background: var(--background);
  box-sizing: border-box;
  padding: 1rem;
}

.main-menu > .options .item {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.main-menu > .options .item > p{
  font-size: 1.2rem;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.main-menu > .options .item > img{
  margin: 0 1rem;
  width: 1rem;
  height: 1rem;
  align-self: center;
}

.main-menu > .hamburger > .line {
  position: relative;
  background: var(--color);
  height: 3px;
  width: 2rem;
  margin: 9px auto;
  border-radius: 3px;
  top: inherit;
  bottom: inherit;
  opacity: 1;
  transition: 1s;
}

.main-menu.active >.hamburger {
  width: 100%;
}

.main-menu.active >.hamburger > .line {
  background: red;
}

.main-menu.active >.hamburger > .line.\31 {
  transform: rotate(45deg);
  top: 20%;
}

.main-menu.active >.hamburger > .line.\32 {
  opacity: 0;
}

.main-menu.active >.hamburger > .line.\33 {
  transform: rotate(-45deg);
  bottom: 20%;
}


      
        MENU
        
        
        
      
      
        
          Cíle
          
        
        
          Úkoly
          
        
        
          Návyky
          
        
        
          Koncepty
          
        
        
          Kalendář
          
        
        
          Nastavení
          
        
      
    

      
        
          
          
            
            
              
              
                Vysoká
                Střední
                Nízká
              
            
            
          
        
        
        Dokončit za:
        
          
          
          
          měsíců
        
        
          
          
          
          týdnů
        
        
          
          
          
          dní
        
        
          
          
          
          hodin
        
        
          
          
          
          minut
        
        
      
      
      
      
        
          
          
            
            Zbývá vám  na dokončení

There is a screen for visualization:

Ondřej Plicka · Accepted Answer

The solution is

.completion-date {
    /* your code */
    visibility: hidden;
}

.completion-date.active {
    /* your code */
    visibility: visible;
}

The visibility: hidden; hides the element and disables interaction with it and visibility: visible; will display it, while keeping the animations.

Keep in mind that the visibility property when the elements position isn't absolute or fixed then it will leave a blank space where the element would be normally seen.

How to hide elements while preserving animations?

Answers (1)

Related Questions