javascript - 延迟的可逆转换

Question

我想做的是让悬停过渡或动画(可以通过 javascript 使用 onmouseover 或 onmouseenter 触发)，这也是可逆的(所以相反的动画应该在鼠标离开时发生)但是

• 相反的动画应该有延迟
• 它应该能够在动画中间无延迟地反转

如果不展示就很难描述，所以请检查这个非常接近我想要实现的代码笔:http://codepen.io/anon/pen/xROOqO

这里有两个问题:

• 我需要检查 transitionend 处理程序中耗时，因此我需要更新 css 和 js 以更新转换时间
• 当你快速悬停在反向动画上时它仍然有延迟 - 看起来它卡在中间

这甚至可以使用 css 转换(可能是关键帧动画)，还是我应该坚持在 javascript 中设置计时器并忽略 css 的延迟？

Answer 1

不确定我要介绍的内容是否更简单，但它似乎解决了您的一些问题，并且符合我的口味。

主要思想是承认问题由于多个状态而变得复杂，并使用状态机解决它。这允许像这样的声明式方法:

const TRANSITIONS = {
  'small-inside' : {
    'transitionend' : 'big-inside',
    'mouseover' : 'small-inside',
    'mouseout' : 'small-outside',
  },
  'small-outside' : {
    'transitionend' : 'small-outside',
    'mouseover' : 'small-inside',
    'mouseout' : 'small-outside',
  },
  'big-inside' : {
    'transitionend' : 'big-inside',
    'mouseover' : 'big-inside',
    'mouseout' : 'big-outside',
  },
  'big-outside' : {
    'transitionend' : 'small-outside',
    'mouseover' : 'big-inside',
    'mouseout' : 'big-outside',
  },
}

事件处理非常简单:

function step(e){
  box.className = TRANSITIONS[box.className][e.type];
}
box.addEventListener('transitionend', step);
box.addEventListener('mouseover', step);
box.addEventListener('mouseout', step);

另一种见解是，您可以使用 CSS transition-delay:3s 属性指定延迟:

div.small-inside,
div.big-inside {
  width: 300px;
}
div.small-outside,
div.big-outside {
  width: 150px;
}
div.big-outside {
  transition-delay:3s;
}

概念证明在这里:http://codepen.io/anon/pen/pNNMWM .

我不喜欢我的解决方案的一点是，它假定初始状态为 small-outside，而实际上鼠标指针在页面加载时可能恰好位于 div 内。您提到了从 JS 手动触发状态转换的能力。我相信只要您跟踪两个单独的 bool 变量，这是可能的:“鼠标在里面吗？”和“js要求成长吗？”。您不能将它们混合成一个状态并期望正确的“计数”。如您所见，我已经有了 2*2=4 状态，因为我正在尝试跟踪 {small,big}x{inside,outside} - 可以想象以类似的方式将其扩展到 {small,big}x{inside,outside}x{js-open,js-close}，并添加一些额外的“事件”，例如“打开”和“关闭”。