如何在需要时正确禁用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(右)，过渡在3s上完成。
• 用JS完成:当鼠标进入灰线上时，transform属性直接在标签上更新为"跟随鼠标"。

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

其他尝试我也尝试通过添加transition: all 0s与Javascript来"禁用"临时，但现在方块传送自己时，鼠标进入灰色线。

(与update相同的代码)

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>