延迟可逆过渡 [英] Reversible transition with delay

问题描述

我想做的是悬停过渡或动画处理（可以使用 onmouseover 或 onmouseenter ）也是可逆的（因此，相反的动画应在鼠标离开时发生），但

What I'm trying to do is to have on hover transition or animation (can be triggered via javascript with onmouseover or onmouseenter) that will also be reversible (so the opposite animation should happen on mouse leave) but

• 相反的动画应具有延迟


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

这很难要描述而不显示，请检查与我要实现的代码库非常接近的代码： http： //codepen.io/anon/pen/xROOqO

It's hard to describe without showing so please check this codepen that is pretty close to what I'm trying to achieve: http://codepen.io/anon/pen/xROOqO

这里有两个问题：

• 我需要检查 transitionend 处理程序中的经过时间，所以我需要同时更新css和js来更新过渡时间


• 当您快速将鼠标悬停在反向动画上时，它仍然有延迟-好像卡在了里面中间的

• I need to check for elapsed time in transitionend handler, so I would need to update both css and js to update transition time
• It still has delay when you quickly hover in and out on the reverse animation - looks like it's stuck in the middle

使用CSS过渡（也许是关键帧动画）甚至可以做到这一点，还是我应该坚持在javascript中设置计时器，而忽略从CSS延迟？

Is this even possible using css transitions (perhaps keyframes animation) or should I stick to setting timers in javascript and leave out the delay from css?

推荐答案

不确定我要讲的内容是否更简单，但这似乎可以解决您的某些问题问题，并符合我的口味。

Not sure if what I'm going to present is simpler, but it seems to address some of your issues, and matches my taste.

主要思想是承认由于多个状态而导致的问题很复杂，并使用状态机解决该问题。
这允许采用这样的声明性方法：

The main idea is to admit that the problem is complicated due to multiple states, and address it using a state machine. This allows for a declarative approach like this one:

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 属性：

Another insight is that you can specify the delay using CSS transition-delay:3s property:

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} 中类似的方式，还有一些额外的事件，例如打开和关闭。

What I do not like about my solution is that it assumes that the initial state is small-outside while actually the mouse pointer could be well located within the div when the page loads. You've mentioned ability to trigger state transitions manually from JS. I believe this is possible as long as you keep track of two separate boolean variables: "is mouse inside?" and "does js asked to grow?". You can not mix them into a one state and expect correct "counting". As you see I already have 2*2=4 states because I'm trying to keep track of {small,big}x{inside,outside} - one could imagine extending it to {small,big}x{inside,outside}x{js-open,js-close} in similar manner, with some extra "events" like 'open' and 'close'.

这篇关于延迟可逆过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！