const nextSlide = (arr) => {
let ind = 0;
arr.forEach((element, index) => {
if (element.classList.contains("slider__item--active")) {
ind = index + 1
}
element.classList.remove("slider__item--active")
})
if (ind >= arr.length) { ind = 0 }
arr[ind].classList.add("slider__item--active")
}
document.addEventListener("click", (evt) => {
const target = evt.target;
const slider = target.parentNode
if (target.classList.contains("slider__btn--next")) {
nextSlide([...slider.querySelectorAll(".slider__item")])
}
})useEffect(()=>{
srollContainer.current.scrollTo({ top: count * 100, behavior: "smooth" });
})normal
Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
reverse
Анимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
alternate
Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного, а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.
alternate-reverse
Анимация начинает проигрываться с конечного положения и доходит до начального, а в следующем цикле продолжая с начального переходит в конечное, в зависимости от количества итераций анимации animation-iteration-count.
Нет. Но никто не мешает передавать res в функцию как аргумент.
<Routes>
<Route path="/" element={<Dashboard />}>
<Route
path="messages"
element={<DashboardMessages />}
/>
<Route path="tasks" element={<DashboardTasks />} />
</Route>
<Route path="about" element={<AboutPage />} />
</Routes>Whenever the location changes, looks through all its child routes to find the best match and renders that branch of the UI.