任何人都可以解釋我爲什麼這個過渡不起作用嗎？

所以我做了這個手機導航，一切工作正常。我的菜單圖標變成X，我可以用jQuery切換is-open類。但是我不能讓這個簡單的過渡工作，這讓我瘋狂。任何人都可以請幫我嗎？任何人都可以解釋我爲什麼這個過渡不起作用嗎？

.mobile-nav 
    background: rgba(0,0,0,1) 
    display: none 
    padding: 20px 0 
    position: absolute 
    top: 44px 
    transform: translateY(-100%) 
    transition: all 0.3s ease-in-out 
    width: 100% 

@media (max-width: 770px) 
    .mobile-nav.is-open 
    display: block 
    transform: translateY(0%)

來源

2015-10-19 Cylion

據我所知，您不能對具有display:none的元素進行動畫製作。

這就是爲什麼你的動畫不工作。你可以在這個answer

來源

2015-10-19 12:26:47

找到替代解決方案到動畫運行時它獲得顯示塊權利？編輯：即使如此，你確實是對的。它工作但我確實覺得很奇怪。 – Cylion

@ user3036405動畫在屬性值從一個變爲另一個時發生。具有'display：none'的元素根本不會被渲染，所以它之前沒有發生過渡。你可以閱讀更多[這裏]（http://stackoverflow.com/a/11056610/2333214） –

無論如何非常感謝你的時間。 – Cylion

任何人都可以解釋我爲什麼這個過渡不起作用嗎？

回答

相關問題