Согласно спецификации
Оператор "Унарный +" преобразует свой операнд к типу Number.
Для чего это нужно в коде в вопросе?
el.style.opacity
- возвращает строку, поэтому при сложении ее с числом, это число было бы приведено к строке и произошла бы обычная конкатенация строк, например:
el.style.opacity = 1
el.style.opacity = el.style.opacity + 2
значением el.style.opacity
в данном случае будет "12"
, а не 3
.
При этом, в случае с Date
, можно опустить этот оператор, так как аргументы "оператора –" и так будут приведены к числу. Но даже и этого не нужно, так как есть метод now()
, который уже возвращает число.
Кроме того вместо расчета приращения прозрачности можно просто заново рассчитывать полное значение прозрачности и вообще убрать приведение к числу и не хранить последнее значение timestamp.
Исходя из этого, код можно переписать так:
function fadeIn(el) {
el.style.opacity = 0;
var start = Date.now();
var tick = function() {
el.style.opacity = (Date.now() - start) / 400;
if (el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
fadeIn(document.getElementById('a'));
#a {
width: 100px;
height: 100px;
background-color: green;
}
<div id="a"></div>
Так как callback для requestAnimationFrame
первым параметром принимает текущий timestamp, который соответствует значению возвращаемому performance.now()
можно использовать его например так:
function fadeIn(el) {
el.style.opacity = 0;
var start = performance.now();
var tick = function(timestamp) {
el.style.opacity = (timestamp - start) / 400;
if (el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
};
tick();
}
fadeIn(document.getElementById('a'));
#a {
width: 100px;
height: 100px;
background-color: green;
}
<div id="a"></div>
style.opacity
схожий принцип:style.opacity
имеет типstring
, а использование унарного+
приводитstring
кnumber
.