延迟的可逆转换

我想要做的是在悬停转换或动画上（可以通过与onmouseover或onmouseenter的javascript触发），这也是可逆的（所以相反的动画应该在鼠标离开时发生），但延迟的可逆转换

相反的动画应该有一个延迟
它应该能够在动画中扭转毫不拖延地

很难不显示来形容，所以请检查这个codepen日在是非常接近我想要实现：http://codepen.io/anon/pen/xROOqO

有两个问题在这里：

我需要transitionend处理程序来检查经过的时间，所以我需要更新CSS和JS更新过渡时间
它仍然有延迟，当您快速悬停和缩小反向动画 - 看起来像是卡在中间

这甚至可能使用CSS转换（也许是一个关键帧nimation）还是我应该坚持在JavaScript中设置计时器并忽略来自css的延迟？

来源

2016-11-14 apieceofbart

你给的codepen有什么问题？ – Alvaro

1）转换时间都在css和js中，这对维护不利 2）当盒子缩小，并且你快速悬停进出时，它将停止中间的转换 - 我希望当盒子继续缩小时你搬出去。 – apieceofbart

我已经在另一个codepen中解决了这个问题，但它很丑，使用setInterval：http：// codepen。io/anon/pen/yVJoZX 如果有人有更好的主意我很乐意看到它 – apieceofbart

不知道我要提出的是什么更简单，但它似乎解决了您的一些问题，并符合我的口味。

主要思想是承认问题因多个状态而变得复杂，并且使用状态机来解决它。这使得像这样的一个声明的方式：

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手动触发状态转换的能力。我相信这是可能的，只要你跟踪两个单独的布尔变量：“是鼠标在里面吗？”和“是否要求增长？”。你不能将它们混合成一个状态，并期望正确的“计数”。正如你所看到的，我已经有2*2=4的状态，因为我试图跟踪{small,big}x{inside,outside} - 可以想象以类似的方式将它扩展到{small,big}x{inside,outside}x{js-open,js-close}，并且有一些额外的“事件”，比如“打开”和“关闭”。

来源

2016-11-18 13:22:42 qbolec

谢谢！好想法！ – apieceofbart

延迟的可逆转换

回答

相关问题