Witam!
Stworzyłem stronę powitalną która składa się z navbara ( logo oraz nawigacja ), wyśrodkowanego animowanego tła oraz buttona. Gdy użytkownik wchodzi na stronę, pojawiają mu się te wszystkie elementy a animowane tło jest lekko przyciemnione. Przy kliknięciu przycisku, tło się "odciemnia" a navar oraz tytuł strony zanikają i... z tym właśnie jest problem..
Nawigacja oraz reszta elementów ma czas wygasania (opacity z 1 do 0) w przeciągu 0.5s oraz mam ustawione visibility które zmienia wartość z 1 do 0 po 0.5. Problem z tym wszystkim ma tytuł. Wszystko płynnie zanika prócz niego, który po prostu znika bez płynnego przejścia po upływie 0.5s.
Na dodatek, tytuł ten gryzł się z tłem. O tyle to było dziwne, że wszystkie elementy się pojawiały poza nim który był schowany za tłem. Co jest jeszcze dziwniejsze to to, że ::after owego tytułu nie ma tego problemu i pojawiał się "na" tle. Pomogło ustawienie z-index'a na tle.
W kodzie mniej wygląda to tak:
W CSS ustawiłem takie coś:
visibility: visible;
opacity: 1;
display: initial;
transition: visibility 0.5s, opacity 0.5s linear;
Wartość visibility oraz opacity kontroluje js z którym nie mam problemu
Pozdrawiam ! :)