Kawałek Kodu

Dzisiejszy wpis jest nie tylko dla tych, którzy spóźnili się na własny ślub czy na obiad z teściami. Jest dla wszystkich, a dla tych pierwszych może być swoistym katharsis. A dlaczego? Bo dziś będziemy chwalić spóźnienia. Ba! Nie tylko chwalić, ale nawet z premedytacją używać.

Start i lądowanie.

Zanim w ogóle wystartujemy, potrzeba nam będzie parę bagaży. Stworzymy prosty widget, wysuwany z bocznej krawędzi strony. Właściwie to miejsce na niego, bo docelowo możesz w nim umieścić cokolwiek. Kiedyś te wysuwane widgety służyły za pojemniki na fejsbukowe LikeBox'y. Dziś już chyba nie są tak popularne. Nic nie stoi na przeszkodzie, aby jednak stworzyć taki, szczególnie, że będzie inny, bo oczywiście nie użyjemy JavaScript. Zacznijmy od HTML:

<div class="widget">
  <div class="inner"></div>
</div>

+

.widget {
  position: fixed;
  left: -200px;
  top: 50%;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  padding-right: 25px;
  background: #ddd;
  transition: left 0.5s ease;
}

.widget:after {
  content: "Widget";
  position: absolute;
  left: calc(100% - 25px);
  top: 100%;
  width: calc(100% - 25px);
  height: 25px;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  background: #00f;
  color: #fff;
  text-align: center;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.widget:hover {
  left: 0;
}

I w sumie fajnie działa, ale po zjechaniu myszą widget się chowa. Jeśli więc przez roztargnienie chcemy jeszcze raz wrócić do zawartości, to musimy znów na niego najechać i poczekać na wysunięcie.

Lot opóźniony.

A gdyby widget wykazał odrobinę empatii i poczekał chwilę z chowaniem się za winkiel? Dodajmy więc do transition opóźnienie.

.widget {
/* poprzednie właściwości,
   a do transition dodajemy
   1.5s opóźnienia
*/
  transition: left 0.5s ease 1.5s;
}

Hmm... chyba nie całkiem o to chodziło. Widget co prawda po zjechaniu myszą chowa się z opóźnieniem, ale rówież pokazuje leniwie.
A co stoi na przeszkodzie ustawić transition-delay na 0s przy :hover? Nic!

.widget:hover {
  left: 0;
  transition-delay: 0s;
}

Jest! Z pomocą tej właściwości nasz widget, w krótkim czasie opanował podstawy savoir-vivre. Jak to działa? Przy :hover widget ma nadane transition bez transition-delay, bo to jest resetowane właśnie na :hover. Natomiast przy zjechaniu myszą, kiedy transition jest cofane, wtedy obowiązuje już transition-delay o wartości 1.5s, więc efekt wystartuje z tym opóźnieniem. Jest delikatna wada tego rozwiązania. Mianowicie przy niepełnym wysunięciu widgetu (szybkim zjechaniu myszą), transition obowiązuje opóźnienie i przez tą chwilę widget pozostaje w takiej pozycji. Ale czy pomimo wad nie da się go lubić...?

Wait(er), wait(er)!

I jeszcze jeden praktyczny przykład. Czyli zaprzęgnięcie opóźnienia do menu nawigacyjnego.

<nav>
  <ul>
    <li>O sklepie</li>
    <li>
      Asortyment
      <ul>
        <li>Woda w proszku</li>
        <li>Chińskie japonki</li>
        <li>Latarki na baterie słoneczne</li>
      </ul>
    </li>
    <li>
      Dostawa
      <ul>
        <li>Rakieta</li>
        <li>Autostop</li>
      </ul>
    </li>
    <li>Kontakt</li>
  </ul>
</nav>

+

/* kontener nawigacji */
nav {
  background: #ddd;
  position: absolute;
  left: 0;
  top: 0;
  height: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* pasek nawigacji */
nav>ul {
  width: 100%;
  max-width: 640px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* wspólne style dla bloczków menu */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #ddd;
}

/* wspólne style dla pozycji menu */
nav li {
  white-space: nowrap;
  text-align: left;
  padding: 0 10px;
}

/* główne pozycje menu */
nav>ul>li {
  position: relative;
  width: 25%;
}

/* bloczki menu drugiego stopnia,
   czyli podmenu
*/
nav ul ul {
  position: absolute;
  left: 0;
  top: 100%;
  visibility: hidden;
  transition: visibility 0s 1.5s;
}

/* pozycje menu drugiego stopnia */
nav ul ul li {
  margin: 5px 0;
}

/* pokazanie bloczka podmenu */
nav ul li:hover ul {
  visibility: visible;
  transition-delay: 0s;
}

Do pokazywania i chowania menu wykorzystujemy właściwość visibility. Ta jest nieanimowalna (nie ma stanów pośrednich pomiędzy hidden i visible), ale nic nie stoi na przeszkodzie, aby wykorzystać ją w transition. Zasada użycia opóźnienia jest identyczna - resetujemy na :hover, a "dodajemy" na stan domyślny.

Kolejny wpis pojawi się... bez opóźnienia! Zapraszam Cię.

Przydatne linki:
Właściwość transition-delay
Właściwość visibility