忽略 CSS 过渡答案

【问题标题】：Ignore a CSS transition忽略 CSS 过渡
【发布时间】：2015-08-28 14:43:46
【问题描述】：

我有一个 div 有一个

transition:1s;

滚动时，我将 div 从她的实际位置移动到计算出的新位置，然后过渡到平滑。但是有人要求我，div 不能超出实际视图。

如果我滚动得非常快，我的 div 将在短时间内离开视图，然后再回来。

我的问题是，有没有办法以某种方式忽略过渡？就像，当我的计算表明 div 将在视图之外时，我可以写下最小顶部位置以使她留在视图中。

或者唯一的解决方案是删除转换（所以我们说一个类

.divTransition{
 transition:1s;
}

什么时候我需要这样做，然后把它放回去？

这是一个小提琴，基本上我希望红色立方体始终保持在视图中。

基本上我希望红色框始终保持在视图上，并且永远不会离开“屏幕”

谢谢

【问题讨论】：

【解决方案1】：

尝试为您不想要的特定div 添加id transition 并删除该类

document.getElementById("whatever").classList.remove("divTransition");
document.getElementById("whatever").classList.add("divTransition");

【讨论】：

【解决方案2】：

您可以尝试以不同的方式解决问题，因为显然您的原始想法和新要求是冲突的。

我建议在页面上创建一个smooth scroll，并修复红色 div - 这样，一切看起来仍然非常顺利，但 div 将始终保持原位。如果您愿意，您仍然可以播放 onload 动画。

【讨论】：