Question

我尝试做的是进行悬停过渡或动画（可以通过带有onmouseover或onmouseenter的javascript触发），这也是可逆的（所以相反的动画应该是在鼠标离开时发生但是

相反的动画应该有延迟
它应该能够在动画中间反转而不会延迟

如果没有显示就很难描述，请检查这个与我想要达到的目标非常接近的代码：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手动触发状态转换的功能。我相信这是可能的，只要你跟踪两个独立的布尔变量：“鼠标在里面吗？”并且“js要求成长吗？”你不能将它们混合成一个状态，并期望正确的“计数”。如您所见，我已经有2*2=4个状态，因为我正在尝试跟踪{small,big}x{inside,outside} - 人们可以想象以类似的方式将其扩展到{small,big}x{inside,outside}x{js-open,js-close}，还有一些额外的“事件”，如'打开'和'关闭'。

延迟可逆转换

1 个答案: