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:
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.
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 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”
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: