Простая анимация на основе прокрутки с использованием настраиваемых свойств CSS

Теперь, когда поддержка настраиваемых свойств css становится широко распространенной, я решил использовать их для упрощения создания анимаций на основе прокрутки. В Javascript я использую style.setProperty ('- customProperty', value) для настройки настраиваемых свойств определенных элементов при прокрутке пользователем.

Он прекрасно работает в Chrome, Firefox и Safari 10.

Но в Safari 9.1 (который поддерживает настраиваемые свойства) я могу установить свойство только один раз. После установки оно не обновится до нового значения.

У меня есть все это в CodePen: https://codepen.io/kirkhadden/pen/JJbXmE/

// Have we scrolled since the last frame? 
if (position != wrapper[0].scrollpos) {

  // Keeps updating accurately every frame:
  window.log.text(position);

  // Only happens on the first frame:
  wrapper[0].style.setProperty('--scrollpos', position+'px', '');

  wrapper[0].scrollpos = position;

} else { // No Change

  return false;

}

Я не могу найти никакой информации или даже упоминания об этом поведении. Я тестировал другие, более простые способы использования style.setProperty () в Safari, и продолжаю обнаруживать, что после установки свойства Safari не обновляет это свойство, даже если я сначала попытаюсь удалить это свойство.

Это ошибка Safari 9.1? Есть ли обходной путь? Есть ли другой способ использовать javascript для установки переменных css?

Обновлять

Итак, вместо style.setProperty я мог бы вместо этого использовать метод jQuery .attr () для установки свойства. Это не идеально, поскольку при этом будут перезаписаны любые другие свойства стиля, но это работает.

Более серьезная проблема заключается в том, что все это решение основано на идее установки обычных анимаций css для всех моих анимированных элементов, но с установкой состояния воспроизведения на паузу, а затем с использованием javascript для управления задержкой анимации в соответствии с положением прокрутки . Это позволяет мне использовать наследование для анимации множества вещей с минимальными манипуляциями с DOM.

Еще раз, Safari 9.1 является препятствием, поскольку кажется, что в отличие от Chrome или Firefox, если состояние воспроизведения «приостановлено», Safari вообще не запускает анимацию и игнорирует задержку анимации.


javascript css css-animations safari css-variables
person Kirk Hadden    schedule 19.06.2017    source источник
comment
Похоже, что атрибуты данных были бы лучше, если бы вы использовали их для хранения данных.   -  person epascarello    schedule 19.06.2017
comment
Ну, я не использую его для хранения данных, я использую его как настраиваемое свойство css. Проверьте: smashingmagazine.com/2017/04/start- using-css-custom-properties   -  person Kirk Hadden    schedule 20.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать полифилить переменные CSS через JavaScript.

Например:

let variables =
{
  color: "red",
  border: "2px solid blue"
}

// Get STYLE tag
let style = document.getElementById('custom');
// Save its original text
style.dataset.source = style.innerHTML;
function updateStyle()
{
    // Replace variables names with their values
    style.innerHTML = style.dataset.source.replace(/@(\w+)/g, function(match, name)
    {
        return variables[name];
    });
}

updateStyle();

Теперь вы можете использовать @variableName в своем CSS, и он будет заменен значением variables.variableName

Сценарий: https://jsfiddle.net/JacobDesight/v7mqps84/

@РЕДАКТИРОВАТЬ

Вы даже можете создать функцию для переменных настроек:

function setProperty(name, value)
{
    variables[name] = value;
    updateStyle();
}

Теперь вы просто делаете что-то вроде:

setProperty('color', 'green');

И он автоматически обновит стили.

Сценарий: https://jsfiddle.net/JacobDesight/v7mqps84/1/

person Isaac Reason    schedule 20.06.2017