純CSS3顯示/隱藏過渡

親愛的讀者＃1全高格，純CSS3顯示/隱藏過渡

我已經打破我的頭在東西我在看到Tympanus，我無法弄清楚如何正確地做這樣的事情。

在此鏈接中：http://tympanus.net/Tutorials/FullscreenBookBlock/ 你可以看到菜單是完全隱藏的，只有當你點擊一個圖標時纔可見。它有一個可愛的過渡，基本上大概總結了我想要完成的事情。

與上面的例子唯一的區別是我不想完全隱藏這個全高度的元素，我想通過懸停而不是點擊按鈕來實現上述效果。因此，在理想的世界中，您會看到一個垂直條，當您將鼠標懸停在該條上時（或者如果您在平板電腦上用手指點擊它），它會「打開」並向您顯示打開div。

現在，我可以在html5和css3中做出相應的調整，但上面解釋的效果讓我非常頭痛，嘿嘿。有沒有人碰巧知道我可能錯過了一個教程，做這個確切的事情？

ps：我試圖拆開Tympanus的html/css，但是頁面摺疊效果也在其中實現，我似乎無法弄清楚，因此我希望有人在這裏幫助我我的方式:)

來源

2012-12-12 user1898838

http://jsfiddle.net/LDntf/ – Shmiddty

http://jsfiddle.net/LDntf/2/

#menu{ 
    position:absolute; 
    width:175px; 
    padding-right:25px; 
    top:0; 
    bottom:0; 
    margin-left:-175px; 
    background:#d00; 
    -webkit-transition:margin-left .5s ease-in-out; 
    z-index:1; 
} 
#menu:hover{ 
    margin-left:0; 
}

要具有內容移動，你可以簡單的動畫內容的div，以及：http://jsfiddle.net/LDntf/8/

#menu:hover + #content{ 
    left:200px; 
    right:-175px; 
} 
#content{ 
    padding:1em; 
    position:absolute; 
    top:0; 
    bottom:0; 
    right:0; 
    margin-right:-20px; /* hide the scrollbars */ 
    margin-bottom:-20px; 
    left:25px; 
    overflow:scroll; /* always render the scrollbars, without this, the content may occasionally be cut off at the edge. */ 
    -webkit-transition:left .5s ease-in-out, right .5s ease-in-out; 
}

來源

2012-12-12 21:44:38 Shmiddty

哦，這個懸停的東西正是我所要找的，謝謝！ :) 只是我的知識，雖然：如果我想要移動的內容區域，以及當你懸停在菜單div上，會改變任何根本上在你的解決方案？你的例子似乎是與Ashley非常不同的方法（上面的解決方案）;我看着兩者，但由於某種原因，他們都強調我的弱點，嘿嘿。我可以很好地用html/css進行佈局，但爲了讓事情發展（像Ashley的例子）讓我的頭旋轉:) – user1898838

純CSS3顯示/隱藏過渡

回答

相關問題