Question

我正在使用这段代码来添加动态样式。

function translateRange(
    input,
    inputMin,
    inputMax,
    outputMin,
    outputMax
) {
    let inputMinA = Math.min(inputMin, input);
    let inputMaxA = Math.max(inputMax, input);

    return (
        outputMin +
        ((outputMax - outputMin) * (input - inputMinA)) /
            (inputMaxA - inputMinA)
    );
};

function animate(node, params) {
  for (var key in params) {
    if (key !== 'trigger') {
      let value = translateRange(params.trigger, params[key].start, params[key].end, params[key].from, params[key].to);
      node.setAttribute("style", `${key}: ${value}`);
    }
  }
}

let block = document.querySelector('#block');
window.addEventListener('scroll', (e) => {
    animate(block, {trigger: window.scrollY, opacity: {start: 0, end: 200, from: 1, to: 0}, rotate: {start: 0, end: 200, from: 0, to: 90} });
});

body {
  height: 300vh;
  padding: 0;
  margin: 0;
}

.container {
  position: sticky;
  top: 0;
}

#block {
  height: 80px;
  width: 80px;
  background: green;
}

<div class="container">
  <div id="block" />
</div>

问题在于rotate道具在这种情况下不起作用。在这种情况下，只有opactiy之类的普通道具可以使用。如何改善animation()的功能，以便opactiy和transform: rotate一起工作？有什么想法吗？

如何设置样式属性的动态性？

0 个答案: