Płynna podmiana arkuszy stylów.

Question

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. 

Comments

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.....

 

---

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ł

---

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

---

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

---

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

---

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;

---

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

---

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

---

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

Answer 1

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;
}

 

Comments

Dzięki! Na pewno sprawdzę gdy tylko wejdę na komputer. 

---

Sposób jak najbardziej zadziałał. Dzięki!!