Animacja otwierania i zamykania aplikacji jak w IOS

Question

Hej, tworzę odwzorowanie iphona w przeglądarce i potrzebuję stworzyć animację otwierania danej aplikacji tak jak to jest w IOS, czyli w momencie kliku na ikonkę to z tej ikonki jakby wychodzi (rozszerza się na cały ekran) widok aplikacji i w momencie zamykania chowa się (wchodzi) w tą ikonkę.
Przykład to dokładnie 0;26s filmiku : https://www.youtube.com/watch?v=uJy8g-xsGGk

Nie mam pomysłu jak stworzyć taką animację, serdecznie dziękuję za pomoc i pozdrawiam :)

Answer 1

Efekt jest prawie taki jaki oczekujesz, natomiast jeszcze nie wpadłem jak zrobić, by animacja zaczynała się od klikniętego miejsca, jeżeli na coś wpadnę to dam znać, na razie ekran otwierający i zamykający się jak w iPhone, ale od środka:

https://codepen.io/Czeran/pen/yPeeYB

Comments

Trzeba pobrać dane z eventa ( pageYOffset i pageXOffset  - przypisać je do left i top otwieranego elementu ). Tak mi się wydaje ;P

---

Dziękuję za Twoją odpowiedz, animacja bardzo fajnie wygląda i pasuje aczkolwiek mam problem z nią, ponieważ ona tak fajnie się skaluje do wszystkich krawędzi ekranu jedynie ze środka, niestety z innych pozycji np 200px 200px ta animacja się przerywa i nie wypełnia wszystkich rogów. Pytanie, jak stworzyć animację która nieważne z jakiego punktu na ekranie zawsze będzie animacyjnie wypełniać(rozszerzać się) do rogów ? Z góry dziękuję :) cz3ran