Javascript не изменяет стили элемента

Question

возникла проблемка. Мне надо, чтобы после загрузки страницы у элементов изменились стили по средствам 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. Это лишь маленький пример, сделанный для стака, но примерно так же сделано в моем основном проекте, и проблема та же.

Answer 1

Ничего не понятно, но здесь явно логическая ошибка:

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';
}

Может быть, вы имели в виду:

for ( let i = 0; i < els.length; i++ ) {
  els[ i ].style.transition = 'opacity .75s ease 0s';
  requestAnimationFrame(()=>{
    els[ i ].style.opacity = '0';
  });
}

Хотя я даже вообще не понимаю смысла вашего кода.

Answer 2

Браузер не применяет стили, пока не наступит отрисовка кадра, то есть пока не закончатся все синхронные действия. Иначе говоря он применит только конечные значения, которые уже несколько раз затёрли прошлые.

После els[i].style.opacity = '0'; сделайте немедленное применение стилей к элементу. Например методом window._someFakeVar = els[i].offsetWidth;. (Тут window._someFakeVar чтобы не было оптимизаций, можете это опустить).

И только после этого пишите строчку els[i].style.transition = ...

БЛОГ НА HUSL

Javascript не изменяет стили элемента

Ответы (2 шт):