如何在需要时正确禁用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>

在此代码中，transform:translateX()的{​​{1}}位置根据鼠标位置从0更新为400px：

• 完成CSS ：当鼠标在白色框中输入时，CSS #square属性从0（左）更新为400（右），过渡在3s完成
• 使用JS完成：当鼠标在灰线上输入时，transform属性会直接在标签上更新为“跟随鼠标”。

问题：当鼠标进入灰线时，立方体在鼠标下方很好地（有过渡）。但是当鼠标移动（快速）时，属性每次都会改变，而方形根本不移动（由transform属性引起）

其他尝试我还尝试将transition与 Javascript 添加到“禁用”临时，但现在当鼠标进入灰色时方形传送自己线。

（与更新相同的代码）

transition: all 0s

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;
}

如何合并两个解决方案以获得一个漂亮而流畅的移动方块？

Answer 1

这真的很复杂。我得到的是，你想要能够在没有明显的速度变化的情况下移动鼠标，并且几乎在鼠标永不移动的同时到达指针。为此，您基本上必须首先监听鼠标进入目标区域并更新目标和转换延迟，以便它不会在3秒内重置。这是一个演示，可以满足您的要求。它使用javascript来确定延迟时间应该是什么，并在更新目标X值时更新它。我确实必须在转换时禁用缓动，但是看起来不那么生涩。希望这有助于您更多地了解问题，也许可以将其用于满足您需求的解决方案。

＆＃13;

＆＃13;

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);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;