Почему мои переходы CSS не работают между определенными переменными цвета - PullRequest
Новая
       27

Почему мои переходы CSS не работают между определенными переменными цвета

0 голосов
/ 21 апреля 2019

Я делаю интерактивное изображение SVG, которое будет переходить между 2 или более состояниями. В ту же минуту я могу получить немедленное изменение, переключая класс, но никаких переходов не происходит.

Я пытался поместить их в отдельные классы, и переходы работают, но это было бы громоздко.

Это два состояния CSS, между которыми я хочу переключиться 

.weatherBackground {
  --color-stop-1:#fff;
  --color-stop-2:#6cddf7;
  --color-1:#fd4b0d;
  --color-2:#ff9b1f;
  --color-windows:#fff;
  --color-3:#ffe96b;
  --stars-opacity:0;
}

.weatherBackground.night {
  -webkit-transition:all 3s ease-out;
  -moz-transition:all 3s ease-out;
  -o-transition:all 33s ease-out;
  transition:all 3s ease-out;
  --color-1:#0056e9;
  --color-2:#3995ff;
  --color-windows:#fffc07;
  --color-stop-1:#000000;
  --color-stop-2:#072254;
  --stars-opacity:1;
}

Ссылка в SVG, как это 

<g id="windows" fill="var(--color-windows)">
<rect width="25" height="25" y="700" x="10"/>
</g>

Я хотел бы переключаться между различными определенными переменными. --color-1 снижение с #fb4b0d до #0056e9

EDIT: Я отказался от идеи массового изменения переменных CSS. Я полагаю, что это невозможно с SVG или просто не стоит усилий, поэтому сейчас я просто разделил их для каждого элемента. В любом случае, спасибо за совет

...