Question

考虑一个div，它是正方形，并且我已经垂直和水平检测到了中心。在OnMouseMove事件中，如果从中心到顶部，左侧，左侧，右下我已经在下面编写了代码并可以使用nicley：

var CSSProperties = 
`
  transition-duration: 250ms;
  transition-timing-function: linear;
  transition-delay: 0;
  transition-property: unset;
  transform: 
`;

if (xPosition > xDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateY(${xFormula}deg);`;
}

if (xPosition < xDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateY(${xFormula}deg);`;
}

if (yPosition < yDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateX(${yFormula}deg);`;
}

if (yPosition > yDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateX(${yFormula}deg);`;
}

我有2个问题：

使用这种If Statement书写，它只能在垂直方向上工作，而不是像我删除垂直代码时那样在水平方向上工作。
当鼠标靠近角时，它只能在水平或垂直方向上起作用，而不能同时在两个角上起作用。

我认为我的问题应该在这里，但我无法解决，将不胜感激。

Answer 1

基本上，您的代码会在每个if语句中覆盖DOMElement.style.cssText。
因此，假设第一个和第三个if语句为true；在这种情况下，转换将设置为CSSProperties + `rotateY(${xFormula}deg);`，仅立即设置为`rotateX(${yFormula}deg);`，从而覆盖前一个。由于if语句的顺序，其中垂直计算位于水平计算之后，因此垂直转换属性（rotateX）将覆盖水平计算（rotateY）。

相反，您可以附加到CSSProperties的末尾，这样两者转换已添加。然后，您要做的就是将DOMElement.style.cssText设置为CSSProperties，其中包含您的两个变换。

var CSSProperties = 
`
  transition-duration: 250ms;
  transition-timing-function: linear;
  transition-delay: 0;
  transition-property: unset;
  transform: 
`;

if (xPosition > xDivided) {
  CSSProperties += `rotateY(${xFormula}deg)`;
}

if (xPosition < xDivided) {
  CSSProperties += `rotateY(${xFormula}deg)`;
}

if (yPosition < yDivided) {
  CSSProperties += `rotateX(${yFormula}deg)`;
}

if (yPosition > yDivided) {
  CSSProperties += `rotateX(${yFormula}deg)`;
}

DOMElement.style.cssText = CSSProperties + ';';

如何使If语句同时工作？

1 个答案: