今天我們想與大家分享另一套過渡效果。這一次，我們將探討如何實現(xiàn)側(cè)邊欄的過渡動畫，就像我們已經(jīng)在多級推出菜單中使用的。我們的想法是，以細(xì)微的過渡動畫顯示一些隱藏的側(cè)邊欄，其余的內(nèi)容也是。通常側(cè)邊欄滑入，把其他內(nèi)容推到一邊。這個可過程中可以加入很多微妙而奇特的效果，而今天這篇文章能夠給你一些啟示。
溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現(xiàn)代瀏覽器中瀏覽。
因為我們希望能夠在一個頁面上展現(xiàn)所有的效果，因此我們示例的結(jié)果都是非常具體的。但在一般情況下，我們需要在 Push 容器內(nèi)部或者外部的側(cè)邊欄元素，這取決于我們是要把側(cè)邊欄顯示在 Push 容器的上面還是下面。所以，有兩種 HTML 結(jié)構(gòu)，第一種實現(xiàn)的代碼如下：
<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 -->
或者是下面這種結(jié)構(gòu)：
<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 效果旋轉(zhuǎn) Push 容器和菜單 ：
.st-effect-7.st-container {
perspective: 1500px;
perspective-origin: 0% 50%;
}
.st-effect-7 .st-pusher {
transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-pusher {
transform: translate3d(300px, 0, 0);
}
.st-effect-7.st-menu {
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.st-effect-7.st-menu-open .st-effect-7.st-menu {
visibility: visible;
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}
請注意，我們在這里使用 visibility 屬性，因為在我們的演示中有多個側(cè)邊欄。如果你只是有一個側(cè)邊欄，你將不必把 visibility 屬性從hidden 設(shè)置為 visible。
另外有些瀏覽器不支持偽元素（我們用來實現(xiàn)遮罩）的過渡（transitions），所以你在這些瀏覽器可能會看到一個快速閃爍（例如一些手機(jī)瀏覽器）。還有就是，IE10 不支持 transform-style: preserve-3d 效果，會破壞嵌套的 3D 轉(zhuǎn)換元素。所以有部分例子你將不能夠正確地看到那些效果。
我們希望這個集合給你一些靈感，創(chuàng)造出一些不錯的效果。希望你會喜歡！
哈爾濱品用軟件有限公司致力于為哈爾濱的中小企業(yè)制作大氣、美觀的優(yōu)秀網(wǎng)站，并且能夠搭建符合百度排名規(guī)范的網(wǎng)站基底，使您的網(wǎng)站無需額外費(fèi)用，即可穩(wěn)步提升排名至首頁。歡迎體驗最佳的哈爾濱網(wǎng)站建設(shè)。