transform: translate()
Подскажите пожалуйста, почему после оператора присваивания, функция translate(), в кавычках и аргумент тоже? count это число. sliderLine.style.transform = 'translate(-'+ count * width + 'px)'; Не могу понять эту строку кода. Спасибо.
Ответы (2 шт):
Здесь происходит вычисление значения и конкатенация строк:
- 'translate(-' это первая строка
- count * width - выражение
- 'px)' - вторая строка
И все это склеивается с помощью плюсов
Все свойства, которые задаются через style, должны быть строками, или верно приводящимися к строке, как например число 0.5 для opacity.
Если написать translate( count * width + px ), то будет ошибка. Потому что функции translate в JS не существует, а переменная px тоже не задана.
Сделать это рабочим можно так (но это никому не нужно и бред, просто пример для понимания):
let translate = val => `translate(${val})`; // функция, которая делает строку
let px = 'px'; // просто переменная со строкой 'px'
sliderLine.style.transform = translate( count * width + px );
То есть функция всё равно в итоге просто сделает строку.