今天我們想與大家分享另一套過渡效果。這一次,我們將探討如何實現側邊欄的過渡動畫,就像我們已經在多級推出菜單中使用的。我們的想法是,以細微的過渡動畫顯示一些隱藏的側邊欄,其餘的內容也是。通常側邊欄滑入,把其他內容推到一邊。這個可過程中可以加入很多微妙而奇特的效果,而今天這篇文章能夠給你一些啓示。
因爲我們希望能夠在一個頁面上展現所有的效果,因此我們示例的結果都是非常具體的。但在一般情況下,我們需要在 Push 容器內部或者外部的側邊欄元素,這取決於我們是要把側邊欄顯示在 Push 容器的上面還是下面。所以,有兩種 HTML 結構,第一種實現的代碼如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div
id= "st-container" class = "st-container" > <!--
content push wrapper --> <div
class = "st-pusher" > <nav
class = "st-menu
st-effect-1" id= "menu-1" > <!--
sidebar content --> </nav> <div
class = "st-content" ><!--
this is
the wrapper for the
content --> <div
class = "st-content-inner" ><!--
extra div for emulating
position:fixed of the menu --> <!--
the content --> </div><!--
/st-content-inner --> </div><!--
/st-content --> </div><!--
/st-pusher --> </div><!--
/st-container --> |
或者是下面這種結構:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div
id= "st-container" class = "st-container" > <nav
class = "st-menu
st-effect-1" id= "menu-1" > <!--
sidebar content --> </nav> <!--
content push wrapper --> <div
class = "st-pusher" > <div
class = "st-content" ><!--
this is
the wrapper for the
content --> <div
class = "st-content-inner" ><!--
extra div for emulating
position:fixed of the menu --> <!--
the content --> </div><!--
/st-content-inner --> </div><!--
/st-content --> </div><!--
/st-pusher --> </div><!--
/st-container --> |
效果七的 CSS 代碼如下。我們把透視值添加到主容器,然後我們以 3D 效果旋轉 Push 容器和菜單 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
.st-effect -7 .st-container
{ perspective:
1500px ; perspective-origin:
0% 50% ; } .st-effect -7 .st-pusher
{ transform-style:
preserve -3 d; } .st-effect -7 .st-menu-open
.st-pusher { transform:
translate 3 d( 300px ,
0 ,
0 ); } .st-effect -7 .st-menu
{ transform:
translate 3 d( -100% ,
0 ,
0 )
rotateY( -90 deg); transform-origin:
100% 50% ; transform-style:
preserve -3 d; } .st-effect -7 .st-menu-open
.st-effect -7 .st-menu
{ visibility :
visible ; transform:
translate 3 d( -100% ,
0 ,
0 )
rotateY( 0 deg); } |
請注意,我們在這裏使用 visibility 屬性,因爲在我們的演示中有多個側邊欄。如果你只是有一個側邊欄,你將不必把 visibility 屬性從hidden 設置爲 visible。
另外有些瀏覽器不支持僞元素(我們用來實現遮罩)的過渡(transitions),所以你在這些瀏覽器可能會看到一個快速閃爍(例如一些手機瀏覽器)。還有就是,IE10 不支持 transform-style: preserve-3d 效果,會破壞嵌套的 3D 轉換元素。所以有部分例子你將不能夠正確地看到那些效果。
我們希望這個集合給你一些靈感,創造出一些不錯的效果。希望你會喜歡!