Как временно подсветить якорную ссылку?

Question

[AnotherPlan]

Есть якорь на одной странице: <a href="" id="one">Ссылка</a>
Есть ссылка на другой странице: <a href="url#one">Ссылка</a>

Прокрутка до нужного места работает. Нужно только подсветить на 10-15 секунд (заменить бэкграунд и цвет текста например на нужный).

Есть ли какое-нибудь простое в реализации решение?

ps такой вопрос был на хабре (несколько лет назад), но там не совсем то, что нужно и решения слишком громоздкие.

Answer 1

[Вадим]

Не совсем понятно что именно нужно подсветить.
• Если саму ссылку, на которую нужно нажать, то тут либо через css анимации(transition/keyframes), однако анимация будет зависеть от наличия конкретного состояния(наведение, focus и тд), либо же через JS. Суть та же, однако можно не зависеть от состояния, включать анимацию и выключать по таймеру. А так же есть дополнительные варианты, такие как обработчик нажатия на ссылку.
• Если цель ссылки, на которую она указывает, то тут, в целом, варианты те же. Однако, через css, например, это можно сделать воспользовавшись псевдоклассом :target htmlbook.ru/css/target, либо через js брать назначение ссылки, искать этот элемент по id и так же навешивать анимацию.

Пример на :target, то есть если нужно подсветить цель ссылки:

#one {
  color: blue;
  background-color: transparent;
}

#one:target {
// и другие параметры анимации - направление, длительность, задержка и тд. 
// в соответствии с css keyframes анимациями https://webref.ru/css/keyframes
  animation: blur 10s ease-in-out ... ;
}

@keyframes blur {
   // другие ключевые кадры
   50% {
     color: red;
     background-color: yellow;
   }
}

Answer 2

[Softlink]

Как-то так должно быть?

Comments

[Максим]

Я так понял ему нужно чтобы ссылка подсвечивалась именно когда ты с другой страницы пришел.
А не как сам стиль реализовать.
Ниже я написал решение.

[Softlink]

Максим, для :target без разницы на одной это странице или переход между страницами.

Answer 3

[ArtJH]

1) css hover + transition на 10s?
2) Через js при hover добавлять класс ссылке и через 10 сек удалять этот класс, у класса есть animation

Answer 4

[Максим]

Вот простое решение этой задачи:

Код должен в итоге оказаться на каждой странице где предполагается чтобы ссылки подсвечивались при переходе:

window.onload = function () {
	let url = window.location.href.split('#');
	let link_id = url[url.length-1];
	if(document.getElementById(link_id)) {
		document.getElementById(link_id).classList.add('active-link');
		setTimeout( () => document.getElementById(link_id).classList.remove('active-link'), 10000)
	}

}

.active-link {
color: red; 
/*
тут любые стили активной ссылки и транзишны которые ты хочешь
*/
}