Przyciski sztuczek CSS w czasie tego filmu miały sztuczny efekt 3D. Wyglądają jak niebieska cegła, na którą patrzysz z góry pod kątem. Kiedy je naciśniesz, wyzwalany jest ich stan: aktywny (podobnie jak wszystkie linki / przyciski / wejścia), a CSS przesuwa je w dół iw prawo, wyglądając tak, jakbyś dosłownie wciskał cegłę w powierzchnię.
Jaki jest problem? Przenosząc taki element (w tym przypadku transform translate(3px, 3px);
:) zmieniasz obszar, w którym to naciśnięcie wywoła zdarzenie DOM „kliknięcie”. Jeśli lokalizacja tej prasy znajduje się w obszarze, który jest teraz większy od tego „klikalnego” obszaru, nie zostanie wywołany. Tak więc przycisk wygląda na wciśnięty, ale nigdy nie został naciśnięty. To dziwne, złe i nieoczekiwane zachowanie.
Efekt jest jednak fajny, więc w tym filmie naprawiamy go, przesuwając pseudoelement, aby wypełnić pozostawioną przestrzeń, dzięki czemu obszar „klikalny” jest zawsze taki sam.
Sprawdź demo Pen.