• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Aruba Cloud - Virtual Private Server VPS
+1 głos
339 wizyt
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ć.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

–1 głos
1 odpowiedź 1,187 wizyt
pytanie zadane 8 października 2016 w JavaScript przez Protekton123 Użytkownik (700 p.)
0 głosów
0 odpowiedzi 151 wizyt
pytanie zadane 11 lipca 2017 w JavaScript przez Alex.Ironside Stary wyjadacz (14,920 p.)
+1 głos
2 odpowiedzi 287 wizyt
pytanie zadane 22 listopada 2021 w HTML i CSS przez Billy Użytkownik (680 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...