Animacja podczas ukrywania elementu.

Question

Cześć, mam pewną animację przypisaną do diva

.container > .info-job-open
{
    position: fixed;
    top: 60px;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #87e5ba;
    display: none;
    ---------->  animation: bounceInDown 900ms linear;
}

Tak jak widać na poczatku jest display:none; ale za pomoca JS po kliknięciu przycisku on się pojawia lub znika.

    info.addEventListener('click',function(){
        if(infoOpen.style.display === "block")
             {
                 infoOpen.style.display = "none";
                 info.childNodes[1].textContent = "Sprawdź nad czym pracuje";
             }
        else
            {
                infoOpen.style.display = "block";
                info.childNodes[1].textContent = "Ukryj";
            }
    });

Animacja bounceInDown działa zawsze ale tylko gdy ten div się pojawia, a gdy ukrywamy to już po prostu znika bez animacji, chciałbym dodać animacje ale nie wiem w jaki sposób podczas ukrywania, ktoś pomoże?

Dzięki za pomoc!

Comments

Pokaż kod CSS animacji bounceInDown.

---

@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    -webkit-transform: none;
    transform: none;
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

 

Answer 1

animacje z display: none; nie działają, ponieważ display: none; "usuwa" element ( ale nie usuwa go z DOM ).

Nadaj mu visibility: hidden; opacity: 0; max-height: 0; zamiast display: none;

Answer 2

Cześć,

w mojej opinii animacja dla display: none nie zadziała.

np: https://stackoverflow.com/questions/38772442/css-transition-from-display-none-to-display-block-navigation-with-subnav

Żeby to zadziałało musisz ukryć ją np. poprzez opacity, height:0 itd. Następnie po wykonaniu tego możesz nadać display:none.

Answer 3

Musisz rozróżnić dwie animacje: bounceInDown oraz bounceOutUp (na przykład). Ja proponuję zrobić dwie klasy css z odpowiednimi animacjami i w JS tylko przełączać te klasy.