延遲的可逆轉換

我想要做的是在懸停轉換或動畫上（可以通過與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

延遲的可逆轉換

回答

相關問題