[CSS/JavaScript] Animacja przeźroczystości za pomocą CSS

Chcę zrobić efekt płynnie pojawiającego się okienka. Okienko tworzę i wstawiam na stronę za pomocą JavaScriptu wykorzystując funkcje createElement() i appentChild(). Okienko poprawnie się wyświetla, jednak chciałbym, żeby wyświetlaniu towarzyszyła animacja. Chcę żeby okienko było przeźroczyste i płynnie stawało się nieprzeźroczyste. Mój CSS wygląda tak:

.ukryty {

transition: opacity 0.8s linear;

opacity: 0;

}


.wyswietlony {

opacity: 1;

}

A kod JavaScript jest taki:

blok.appentChild(okno);

okno.className="ukryty";

okno.className="wyswietlnony";

Zmienne blok i okno istnieją i są wporządku, okno się wyświetla, klasy i style są poprawnie nadawane. Jednak nie ma animacji. Okno po prostu się pojawia, transistion w ogóle nie działa. Dlaczego? Powinna być animacja skoro zmienia się klasa stylu. A przynajmniej tak mi się wydaje.

Z góry dziękuję za pomoc

Panie, ale jak ma działać, skoro go nie ma? transition dałeś tylko do class ukrywającej, dodaj jeszcze do pojawiającej i będzie ok.

Już robiłem tak jak mówisz, ale to nic nie zmienia. Animacji dalej nie ma.

Jak dla mnie to z js’em jest coś nie tak :wink:

“appentChild”, powinno być raczej “appendChild”…

Z JS’em jest wszystko w porządku, tak jak pisałem, wszystko dobrze działa, wszystkie klasy się dodają i zmieniają.

Popełniłem literówkę na forum, ale w kodzie jest wszystko dobrze, wszystko działa, z wyjątkiem tej animacji.

Sęk w tym, że zapis css masz poprawny, jeśli masz np. tak:

.ukryty {

opacity: 0;

transition: opacity 0.8s linear;

}


.wyswietlony {

opacity: 1;

transition: opacity 0.8s linear;

}

Można by dopisać opóźnienie, ale raczej to nic nie da (tak jak pewnie rozbicie skróconego zapisu na czynniki pierwsze…):

.ukryty {

opacity: 0;

transition: opacity 0.8s linear 1s;

}


.wyswietlony {

opacity: 1;

transition: opacity 0.8s linear 1s;

}

lub

.ukryty {

opacity: 0;

transition-property: opacity;

transition-duration: 0.8s;

transition-timing-function: linear;

transition-delay: 1s;

}


.wyswietlony {

opacity: 1;

transition-property: opacity;

transition-duration: 0.8s;

transition-timing-function: linear;

transition-delay: 1s;

}

Więc raczej skrypt (podałeś chyba niekompletny) nie potrafi się odnieść do stylu lub jedno i drugie w nim jest/próbuje być wykonywane w tym samym czasie (obie klasy nie mogą wystąpić jednocześnie, muszą się “przełączać” względem wywołanego zdarzenia).

PS. Można by też zmienić “technikę” i ustawić to okno/div/popup, aby domyślnie “istniało” niewyświetlone (display: none;), a sam skrypt miałby za zadanie zmienić ten stan np. poprzez dodanie klasy w określonej sytuacji…

Masz taki śmietnik w tym, że trzeba by to przebudować w całości… Zacznę od tego, że nie masz połowy wywoływanych funkcji. Dlatego, żeby cokolwiek się działo zrobiłem takie zmiany w kodzie, który podałeś.

to:

var id=tworzIdentyfikator("okno_");

na to:

var id="okno_123";

Teraz element dostaje jakieś id. Następnie to:

zamknijOkno(id);

Na to:

document.getElementById(id).className="ukryj";

I zaczęło poprawnie znikać.

Sam kod jest archaiczny i trudny do ogarnięcia. W JQuery zrobisz to w sposób prosty i skuteczny wywołując kilka funkcji. Nie wiem dlaczego decydujesz się na tworzenie kolejnych okienek z poziomu JS, być może tę zawartość pobierasz ajaxem… nie wiem, z kodu nie wynika. Use Jquery Luck!

@tfl - My się nie dogadaliśmy :wink: Podałem tylko kod, który tworzy i wyświetla okienko, nie podawałem wszystkich funkcji pomocniczych które sobie napisałem. Tak jak pisałem kilka postów wcześniej - kod jest w porządku, okienko pojawia się i znika, klasy i style są nadawane poprawnie. Jedyne co nie działa to ANIMACJA pojawiania się i znikania.

Zależy mi żeby zrobić to w czystym JS’ie, bez jQuery. Tak, będę używał do tego AJAX, na razie kod jest jeszcze “młody” :wink:

Mam nadzieję, że już się zrozumiemy :wink:

Zdaje się, że wiem na czym polega problem… To jest niestety przypadłość silników renderujących przeglądarek. Chodzi o to, że w poszukiwaniu wydajności często kod javascriptu interpretowany jest inaczej, niż byśmy zakładali. Przede wszystkim przy spawnowaniu elementów do DOM silnik javascript często gęsto pomija przejścia przez transition i od razu stawia ostateczną wersję CSS. Można to obejść dodając setTimeout. Ale to i tak nie jest najlepsze rozwiązanie. Oto dwa przykłady:

http://jsbin.com/awoduk/1

To robi dokładnie (chyba) to co chcesz, ale w chrome. W firefox efekt jest taki, że przy pojawianiu się okienka nie ma animacji.

Natomiast to:

http://jsbin.com/awoduk/5

działa poprawnie w Firefox, ale zmusza do wyświetlenia okna, który wstrzymuje wykonywanie reszty kodu do momentu interakcji użytkownika.

Innymi słowy - witaj w świecie współczesnych przeglądarek, gdzie każda ma własne standardy (i co? Niby było tak źle za czasów IE5?)

Na szczęście są też takie elementy, w których przeglądarki zdają się jako tako współpracować:

http://jsbin.com/unujug/1

Czyli rezygnujemy z transition na rzecz animation. Zwracam uwagę, ze kolejność w kodzie css ma znaczenie.