Płynna podmiana arkuszy stylów.

pytanie zadane 27 kwietnia 2020 w JavaScript przez chakip Nowicjusz (210 p.)

Cześć!

Ostatnio wymyśliłem sobie mały projekt-ćwiczenie.

Strona WWW z zegarem oraz datą wraz z buttonem, który zmienia kolorystykę elementów na stronce za pomocą podmiany arkuszy CSS. Wszystko działa prawidłowo, lecz gryzie mnie jedna rzecz. Chciałbym aby było jakieś płynne przejście pomiędzy podmianą. I tu pytanie - czy w takiej sytuacji jest możliwe ustawienie jakiegoś przejścia pomiędzy zmianami? Jestem bardzo początkującym w JS i próbowałem coś wymyślić ale nic nie przychodzi mi do głowy.

Podrzucam wam też linka do stronki: https://chakip.github.io/justdateandclock/

Z góry dziękuję za jakąkolwiek pomoc.

komentarz 27 kwietnia 2020 przez Barbarossa Obywatel (1,650 p.)

zastanów się czy nie idzie tego lepiej zrobic, zasada DRY

 function kolor(){
      a=document.getElementsByTagName('link');
      a[0].setAttribute('href','style2.css');
      b=document.getElementsByTagName('a');
      b[0].setAttribute('onclick','kolor2()');
      }

      function kolor2(){
      c=document.getElementsByTagName('link');
      c[0].setAttribute('href','style3.css');
      d=document.getElementsByTagName('a');
      d[0].setAttribute('onclick','kolor3()');
      }

      function kolor3(){
      e=document.getElementsByTagName('link');
      e[0].setAttribute('href','style4.css');
      f=document.getElementsByTagName('a');
      f[0].setAttribute('onclick','kolor4()');
      }

      function kolor4(){
      g=document.getElementsByTagName('link');
      g[0].setAttribute('href','style5.css');
      h=document.getElementsByTagName('a');
      h[0].setAttribute('onclick','kolor5()');
      }
// i tak dalej.....

komentarz 27 kwietnia 2020 przez Barbarossa Obywatel (1,650 p.)

gdyby tak zrobic zmienną color która ma zawsze numerek na poczatku 1 po kliknieciu 2 potem 3 i jak dojdzie tam do 12 to od nowa i wtedy 'style' + color +'.css'. Chyba że chcesz losowo to też możesz się pobawić Math.random()

tak ja bym kombinował

komentarz 27 kwietnia 2020 przez Barbarossa Obywatel (1,650 p.)

@chakip, jeszcze pomysł taki, że możesz zrobić ze ci kolor z calej palety rgb losuje

komentarz 27 kwietnia 2020 przez chakip Nowicjusz (210 p.)

Jest to bardzo dobry pomysł! Ale wole żeby były to kolory które pasują do siebie i tworzyły jakias ciekawa kolorystykę.

komentarz 27 kwietnia 2020 przez chakip Nowicjusz (210 p.)

Mysle, że jest jakiś lepszy sposób na wykonanie tego skryptu, lecz jestem początkującym więc mi to na razie wystarcza. Moze kiedys wroce do skryptu i poprawie go na lepszy :D

komentarz 27 kwietnia 2020 przez Barbarossa Obywatel (1,650 p.)

jak już pisze to rady takie na poczatek zmienne po angielsku i camelCase przy zmiennych, czyli pierwsze słowo z małej kolejne z dużych liter np. var randomNumber;

komentarz 27 kwietnia 2020 przez chakip Nowicjusz (210 p.)

tak mysle ze to poprawie poniewaz chcialem zobaczyc jak taka funkcja w ogole dziala zwykle pisze zmienne po angielsku tak samo jak nazwy selektorow w css :D

komentarz 27 kwietnia 2020 przez Barbarossa Obywatel (1,650 p.)

AA i jak nauczysz sie podstaw (ja tez sie ucze na es5) to potem es 6 stosowac i zamiast var let albo const

komentarz 27 kwietnia 2020 przez chakip Nowicjusz (210 p.)

oki :DD dzięki za rady! pozdrawiam :D

1 odpowiedź

odpowiedź 27 kwietnia 2020 przez Tpk Nałogowiec (40,100 p.)

Nie jest to pewnie najlepsze rozwiązanie, choć dla tak prostej strony w zupełności wystarczające - w kolejnych stylach dodajesz:

* {
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}