Как сделать так, чтобы получить плавный переход?

@AlexKOR5 · Регистрация: 15.02.2019

Студворк — интернет-сервис помощи студентам

Как сделать так, чтобы получить плавный переход?
Я меняю в квадрата background-image но переход происходит резко, пробовал через classList добавлять и удалять классы все равно то же.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
let init = () => {
  Box = document.querySelector('.box');
  heightWindow = document.documentElement.clientHeight;
  visibilityCh();
 
}// end of init
let ifelse = (elem,MainElem)=>{
  if(elem < 0){
    MainElem = false;
  }else if(elem < heightWindow){
    MainElem = true;
  }else{
    MainElem = false;
  }
  return MainElem;
}
let visibilityCh = () => {
  let TopValue;
  let BottomValue;
 
  document.onscroll = () => {
 
    BoxCoords = Box.getBoundingClientRect();
    let top = BoxCoords.top;
    let bottom = BoxCoords.bottom;
 
    with (console) {
      log("top = " + top);
      log("bottom = " + bottom);
    }
    TopValue = ifelse(top,TopValue);
    BottomValue = ifelse(bottom,BottomValue);
 
    with (console) {
      log("topV = " + TopValue);
      log("bottomV = " + BottomValue);
    }
 
    if(TopValue == true && BottomValue == true){
      Box.style.backgroundImage ="linear-gradient(to bottom,red,black,red)";
    }else if(TopValue == true){
      Box.style.backgroundImage = "linear-gradient(to bottom,red 10%,black 75%)";
    }else if(BottomValue == true){
      Box.style.backgroundImage ="linear-gradient(to bottom,black,red)";
    }
  }
}
window.addEventListener('load', init, false);

HTML5
1
<div class="box">1</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
html{
    height:4000px;
}
.box{
    width:500px;
    height:500px;
    background-color:black;
    margin:1500px auto 0 auto;
    transition:all .4s ease-in-out 0s;
}

@AlexZaw · 31.07.2020, 22:11

AlexKOR5, у градиентов анимируются только положение и размер фона. Цвета не анимируются.

@AlexKOR5 · 03.08.2020, 09:30 **[ТС]**

Анимация позиции градиента.
Это как?

@AlexZaw · 03.08.2020, 09:42

Сообщение от AlexKOR5

Анимация позиции градиента.
Это как?

background-position

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,096
	31.07.2020, 22:11
	AlexKOR5, у градиентов анимируются только положение и размер фона. Цвета не анимируются. 1

@AlexKOR5 50 / 14 / 3 Регистрация: 15.02.2019 Сообщений: 514
	03.08.2020, 09:30 [ТС]
	Анимация позиции градиента. Это как? 0

Как сделать так, чтобы получить плавный переход?

Решение