Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как изменить стиль анимации? (https://javascript.ru/forum/misc/84870-kak-izmenit-stil-animacii.html)

miltorg 22.01.2023 00:44
Как изменить стиль анимации?
 
Нужна бегущая строка.

Код:

.news {
  animation : slide 5s linear infinite reverse;
 
}

@keyframes slide {
  0% {
    transform: translatex(-170%)
  }

  100% {
    transform: translatex(100%)
  }
}
Решаю с помощью этого кода. Но строки для бегущей строки - разного размера.

Получается что если короткая строка - то всё пропадает. А если длинная - то не доходит до конца.

Проблему бы решило изменение стиля:

transform: translatex(-170%)

Но как к нему подобраться?

Спасибо большое.

рони 22.01.2023 07:23
miltorg,
http://javascript.ru/forum/dom-windo...uyu-lentu.html

miltorg 22.01.2023 16:07
Я ожидал ответ:

document.querySelector(".news").style.animation = "200%"; //- это не работает

рони 22.01.2023 17:59
Цитата:
Сообщение от miltorg
Но как к нему подобраться?
https://developer.mozilla.org/ru/docs/Web/CSS/var
https://developer.mozilla.org/en-US/...on/setProperty

miltorg 22.01.2023 18:12
Цитата:
Сообщение от рони (Сообщение 550191)
Пожалуйста не пишите мне больше. Ваши ссылки - ни о чём.

рони 22.01.2023 18:15
:)
miltorg,
@keyframes slide {
  0% {
    transform: translatex(var(--max, -170%))
  }

  100% {
    transform: translatex(100%)
  }
}



let newMax = '-100%';
document.querySelector(".news").style.setProperty('--max', newMax);

voraa 22.01.2023 18:30
Цитата:
Сообщение от miltorg
Пожалуйста не пишите мне больше. Ваши ссылки - ни о чём.
Ну ссылка https://developer.mozilla.org/en-US/...on/setProperty как раз очень "О ЧЕМ"
Зная устройство таблицы стилей можно добраться до любого свойства.
Например этот код
<head>
<style id=st>
.news {
  animation : slide 5s linear infinite reverse;
  
}

@keyframes slide {
  0% {
    transform: translatex(-170%)
  }

  100% {
    transform: translatex(100%)
  }
}
</style>
</head>
<body>
<script>
	const st=document.getElementById ('st')
	st.sheet.cssRules[1][0].style.transform = 'translatex(-100%)'
	console.log(st)
</script>
</body>

меняет
0% {
transform: translatex(-170%)
}
на
0% {
transform: translatex(-100%)
}

Все можно изменить, если знать внутреннее устройство

miltorg 22.01.2023 19:04
Цитата:
Сообщение от рони (Сообщение 550193)
:)
miltorg,
@keyframes slide {
  0% {
    transform: translatex(var(--max, -170%))
  }

  100% {
    transform: translatex(100%)
  }
}



let newMax = '-100%';
document.querySelector(".news").style.setProperty('--max', newMax);

О чудо! Это работает!

Спасибо вам


Часовой пояс GMT +3, время: 17:10.