Ukrywanie elementów w ktorych jest ustawiony transform AngularJS / CSS

pytanie zadane 3 listopada 2017 w JavaScript przez Bartlomiej Bywalec (2,480 p.)

Siema próbuję zrobić animacje(wylot z prawej), do wyswietlania kolejnych menu po kliknieciu w ktoregoś a hrefa.

Problem jest taki ze gdy zmieniam menu to jest wylot z prawej, ale tak samo chowa sie po przez wylot do prawej, a chcę zrobić tak by nie bylo wylotu do prawej a po prostu znikal.

Oraz mam problem taki, że elementy pomimo że sa ukryte wciąż tzw jest zarezerwowane miejsce dla nich, nie mogę zrobić display: none ponieważ przestaje działać wylot z prawej, powie mi ktoś jak to ogarnąć?

demo

https://codepen.io/anon/pen/EbKxYO

komentarz 3 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)
edycja 3 listopada 2017 przez ScriptyChris

Myślę, że można to ogarnąć CSSem. Jeśli nie otrzymasz lepszej propozycji rozwiązania problemu, to tymczasowo możesz skorzystać z kombinacji ng-hide i $timeout.

Do kontrolera dorzuć pole $scope.isHidden = false oraz metodę:

  $scope.hideMenu = () => {
    $scope.isHidden = true;
    
    $timeout(() => {
      $scope.isHidden = false;
      $scope.toggle = false;
    }, 300)
  }

, nie zapomnij wstrzyknąć serwisu $timeout do kontrolera. W widoku na anchorze ze znakiem X podmień zawartość ng-click, aby po prostu wywoływać tam metodę hideMenu, czyli:

<a href="#" id="menu-close" ng-click="hideMenu()">X</a>

Do <nav> dorzuć ng-hide="isHidden" i powinno działać - tzn. wtedy menu będzie pokazywać się z animacją wjazdu z prawej strony (tak jak dotychczas), ale już chowanie nastąpi bez animacji (menu po prostu zniknie).

Jak to działa? Tranzycja użyta w CSS trwa 0.3 sekundy, czyli 300 milisekund (po takim czasie odpala się callback z $timeout). W trakcie tych 300ms ng-hide ukrywa menu (robi to "oddolnie" za pomocą display: none), co pozwala optycznie "wyciąć" działanie animacji chowania.

komentarz 3 listopada 2017 przez Bartlomiej Bywalec (2,480 p.)

Ok a co jesli w przypadku menu w srodku co sa, change colour, accessories gdy klikne w ktores z nich, nie bedzie stare menu chowalo sie w sposob wylot do prawej, tylko bedzie znikac?

komentarz 3 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)

Nie rozumiem pytania. Kliknięcie w X ukrywa menu bez animacji. Pozostałe "kliki" wywołują animację, np. jeśli klikniesz drugi raz w "Pokaż menu", to zostanie ono schowane z animacją.

komentarz 3 listopada 2017 przez Bartlomiej Bywalec (2,480 p.)

Chodzi mi o to że, po otwarciu menu klikniesz w change Colour to schowa sie ul a wyskoczy div ze zmianami koloru, no i chodzi mi ze przy chowaniu ul to nie zachodziła animacja chowania tylko po prostu znikało, rozumiesz?

komentarz 3 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)

Czyli, że po kliknięciu w "Change Colour" lub "Accessories" te dwa linki mają zniknąć bez animacji (reszta bez zmian)?

komentarz 3 listopada 2017 przez Bartlomiej Bywalec (2,480 p.)

tak jest, po prostu chodzi mi ogólny efekt cos co przylatuje z prawej nie ma pozniej odlatywac tylko po prostu znikac.

komentarz 3 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)

Możesz kombinować dalej ze sposobem, który Ci podałem, np. dać drugą flagę na listę linków i użyć ng-hide w widoku - tym sterować poziomu metody $scope.changeMenu.

Lepiej jednak, jeśli zrobisz to w CSS, bo moja propozycja to trochę druciarstwo. O ile dla chowania całego menu jeszcze ujdzie, to gdy zaczniesz dodawać flagi, dyrektywy i timery, całość będzie trudniejsza w utrzymaniu i mogą powstać rozbieżności w animacji, bo CSS będzie robić swoje, a Ty Angularem będziesz próbował niektóre czynności maskować.

komentarz 3 listopada 2017 przez Bartlomiej Bywalec (2,480 p.)

Jesli dodam display: none w css to ten transform nie dziala i nie wyjezdzaja mi elementy z prawej. :/ Chyba ze jakis inny pomysl miales odnosnie CSS??

komentarz 3 listopada 2017 przez ScriptyChris Mędrzec (190,190 p.)

Odnośnie CSS, to moim zdaniem raczej da się Twój problem rozwiązać własnie tam. Lecz ja w tym nie pomogę, bo animacji w CSS nie ogarniam - nie było mi potrzebne żeby umieć się nimi posługiwać (albo na tyle sporadycznie, że tego nie pamiętam - musiałbym przysiąść), więc na szybko nie wymyślę jak to naprawić.