javascript - 如何在需要时正确禁用 CSS3 过渡属性

Question

我正在处理 CSS 过渡属性，当我的 JavaScript 更新相同的 CSS 值时我遇到了问题。

我做了一个简单的例子来理解。

document.addEventListener('DOMContentLoaded', function() {
  let container = document.getElementById("container")
  let hovercontainer = document.getElementById("hover-container")
  let square = document.getElementById("square")
  
  let mouseMove = function (e) {
    let el = e.currentTarget;
    let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)

    square.style = "transform: translateX(" + parseInt(delta_x * 400) + "px);"
  }
  let mouseLeave = function(e) {
    square.style = ""
  }
  
  hovercontainer.addEventListener("mousemove", mouseMove)
 hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);

html, body, #wrapper { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
}
#wrapper {
  background: #a4d24b;
  display: flex;
}
#container {
  width: 600px;
  height: 200px;
  margin: auto;
  box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
  background: #FFF;
  display: flex;
}
#hover-container {
  width: 500px;
  height: 100px;
  margin: auto;
  background: #EEE;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #CCC;
  display: flex;
}
#square {
  pointer-events: none;
  width: 90px;
  height: 90px;
  background: #a4d24b;
  margin: auto 5px;
  box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
  transform: translateX(0);
  transition: all 3s;
}
#container:hover #square {
  transform: translateX(400px);
  box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}

<div id="wrapper"> <!-- background -->
  <div id="container"> <!-- white -->
    <div id="hover-container"> <!-- gray -->
      <div id="square"></div> <!-- square -->
    </div>
  </div>
</div>

在这段代码中，#square 的 transform:translateX() 位置根据鼠标位置从 0 更新到 400px:

• 使用 CSS 完成:当鼠标进入白框时，CSS transform 属性从 0(左)更新为 400(右)，转换为3 秒完成。
• 用JS完成:当鼠标进入灰线上时，标签上的transform属性直接更新为“follow the mouse”。

问题:当鼠标进入灰线上时，立方体很好地(带有过渡)出现在鼠标下方。但是当鼠标移动(快速)时，属性每次都改变，正方形根本没有移动(由 transition 属性引起)

其他尝试 我也尝试通过添加 transition: all 0s 和 Javascript 来临时“禁用”，但现在正方形传送自己时鼠标在灰线上进入。

(与更新相同的代码)

document.addEventListener('DOMContentLoaded', function() {
  let container = document.getElementById("container")
  let hovercontainer = document.getElementById("hover-container")
  let square = document.getElementById("square")
  
  let mouseMove = function (e) {
    let el = e.currentTarget;
    let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)

    square.style = "transform: translateX(" + parseInt(delta_x * 400) + "px); transition: all 0s;"
  }
  let mouseLeave = function(e) {
    square.style = ""
  }
  
  hovercontainer.addEventListener("mousemove", mouseMove)
 hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);

html, body, #wrapper { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
}
#wrapper {
  background: #a4d24b;
  display: flex;
}
#container {
  width: 600px;
  height: 200px;
  margin: auto;
  box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
  background: #FFF;
  display: flex;
}
#hover-container {
  width: 500px;
  height: 100px;
  margin: auto;
  background: #EEE;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #CCC;
  display: flex;
}
#square {
  pointer-events: none;
  width: 90px;
  height: 90px;
  background: #a4d24b;
  margin: auto 5px;
  box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
  transform: translateX(0);
  transition: all 3s;
}
#container:hover #square {
  transform: translateX(400px);
  box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}

<div id="wrapper"> <!-- background -->
  <div id="container"> <!-- white -->
    <div id="hover-container"> <!-- gray -->
      <div id="square"></div> <!-- square -->
    </div>
  </div>
</div>

我怎样才能合并这两个解决方案以获得一个漂亮而平滑的移动正方形？

Answer 1

这真的很复杂。我从中得到的是，您希望能够移动鼠标而不会明显改变速度，并使其几乎同时到达指针，就好像鼠标从未移动过一样。为此，您基本上必须在鼠标第一次进入目标区域时监听并更新目标和 转换延迟，以便它不会在 3 秒时重置。这是一个演示，可以满足您的要求。它使用 javascript 来确定延迟时间应该是多少，并在更新目标 X 值的同时更新它。但是，我确实不得不禁用过渡时的缓动，以免看起来那么生涩。希望这可以帮助您更多地了解问题，也许可以将其转化为满足您需求的解决方案。

document.addEventListener('DOMContentLoaded', function() {
  let container = document.getElementById("container")
  let hovercontainer = document.getElementById("hover-container")
  let square = document.getElementById("square")
  let ts = null
  
  let mouseMove = function (e) {
    let el = e.currentTarget;
    let delta_x = parseFloat(e.offsetX / el.offsetWidth).toFixed(2)
        
    if(!ts) ts = new Date().getTime() + 3000;
    let d = Math.max(0, ts - new Date().getTime()) / 1000 + 's';
    
    square.style.transitionDuration = d;
    square.style.transform = "translateX(" + parseInt(delta_x * 400) + "px)";
    
    if(d === '0s') ts = null;
  }
  let mouseLeave = function(e) {
    square.style.transition = null;
    square.style.transform = null;
    ts = null;
  }
  
  hovercontainer.addEventListener("mousemove", mouseMove)
 hovercontainer.addEventListener("mouseleave", mouseLeave)
}, false);

html, body, #wrapper { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
}
#wrapper {
  background: #a4d24b;
  display: flex;
}
#container {
  width: 600px;
  height: 200px;
  margin: auto;
  box-shadow: 0 2px 4px rgba(34, 25, 25, 0.4);
  background: #FFF;
  display: flex;
}
#hover-container {
  width: 500px;
  height: 100px;
  margin: auto;
  background: #EEE;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #CCC;
  display: flex;
}
#square {
  pointer-events: none;
  width: 90px;
  height: 90px;
  background: #a4d24b;
  margin: auto 5px;
  box-shadow: 2px 2px 4px rgba(34, 25, 25, 0.4) inset;
  transform: translateX(0);
  transition: all 3s linear;
}
#container:hover #square {
  transform: translateX(400px);
  box-shadow: 0px 2px 4px rgba(34, 25, 25, 0.4) inset;
}

<div id="wrapper"> <!-- background -->
  <div id="container"> <!-- white -->
    <div id="hover-container"> <!-- gray -->
      <div id="square"></div> <!-- square -->
    </div>
  </div>
</div>