возникла проблемка. Мне надо, чтобы после загрузки страницы у элементов изменились стили по средствам js.
Функция animat
должна обнулить transition
у каждого элемента, на случай если он был, потом установить opacity
в 0 и установить тот transition
, который уже нужен мне.
И вернуть функцию, которая будет изменить стили элемента (Его я потом привяжу контекстом)
Мне нужна именно так, потому что функция изменения стилей будет зависеть от переданных изначально параметров
document.addEventListener( 'DOMContentLoaded', () => {
function animat( els, options ) {
for ( let i = 0; i < els.length; i++ ) {
els[ i ].style.transition = '';
els[ i ].style.opacity = '0';
els[ i ].style.transition = 'opacity .75s ease 0s';
}
return function ( vis ) {
if ( vis ) {
this.style.opacity = `1`;
/** Здесь еще что то меняю в зависимости от параметров */
} else {
this.style.opacity = `0`;
}
}
}
/** Беру нужные элементы */
let elems = Array.from( document.querySelectorAll( '.sc-card' ) );
/** Получаем функцию */
let animFunc = animat( elems, { /** Какие то параметры */ } );
/** И например вызовем изменение для 0 и 1 элементов */
animFunc.call( elems[ 0 ], true );
/** Пробовал еще так, но он даже эту секунду не выжидает, уже видимый */
setTimeout( animFunc.call( elems[ 1 ], true ), 1000 );
} );
Я ожидаю, что все блоки будут скрыты, а первый и второй будут изменены, согласно функции. То есть они плавно появятся. Но на деле первые два элемента уже видны (Без появления), как будто они и не становились невидимыми, а остальные плавно исчезают. Помогите пожалуйста, я уже 3 дня думаю, что не так
P.S. Это лишь маленький пример, сделанный для стака, но примерно так же сделано в моем основном проекте, и проблема та же.