这是一款jQuery和css3滑动显示面板特效插件。在你需要创建内容,又不适合使用tooltips时,你可能会创建一个新的页面。但是作为良好的用户体验,应该尽量避免页面的刷新。这时候,从侧边滑出一个面板将是很好的解决方案。
有很多网站都使用了这个解决方案。你可以去看看 Feedly 和 Spotify web player 。
HTML结构
html结构相当简单,不多做解释。
<main class="cd-main-content"> <!-- your main content here --> </main> <div class="cd-panel from-right"> <header class="cd-panel-header"> <h1>Title Goes Here</h1> <a href="#0" class="cd-panel-close">Close</a> </header> <div class="cd-panel-container"> <div class="cd-panel-content"> <!-- your side content here --> </div> <!-- cd-panel-content --> </div> <!-- cd-panel-container --> </div> <!-- cd-panel -->
CSS样式
首先解释一下为什么要将header从panel容器中分离出来。我们为panel使用了一个CSS3 transformation(准确的说是 translateX )来使它滑动显示。使用CSS3 transformation要比改变position的左右位置的效果要好(参考:Why Moving Elements With Translate() Is Better Than Pos:abs Top/left)。header元素的位置是fixed 的,固定位置的元素再你对它们进行CSS3 transformation时会发生跳动。这是将header从panel容器中分离出来的原因。
.cd-panel { /*...*/ visibility: hidden; transition: visibility 0s 0.6s; } .cd-panel.is-visible { visibility: visible; transition: visibility 0s 0s; } .cd-panel-header { /*...*/ position: fixed; top: -50px; width: 90%; height: 50px; transition: top 0.3s 0s; } .is-visible .cd-panel-header { top: 0; transition: top 0.3s 0.3s; } .cd-panel-container { /*...*/ position: fixed; width: 90%; height: 100%; top: 0; right: 0; transition-property: transform; transition-duration: 0.3s; transition-delay: 0.3s; transform: translate3d(100%, 0, 0); } .is-visible .cd-panel-container { transform: translate3d(0, 0, 0); transition-delay: 0s; }
在上面的代码中注意观察transition-delay属性。当你在页面上使某些元素产生动画,这时如果你想要一些延时或者不同的transition/animation durations,那么transition-delay就派上用场了。如果你想了解更多关于animations 和 transitions的知识,请参阅:Google Material documentation。
JAVASCRIPT
通过jQuery来为面板切换.is-visible 类使其显示和隐藏。
jQuery(document).ready(function($){ //open the lateral panel $('.cd-btn').on('click', function(event){ event.preventDefault(); $('.cd-panel').addClass('is-visible'); }); //clode the lateral panel $('.cd-panel').on('click', function(event){ if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) { $('.cd-panel').removeClass('is-visible'); event.preventDefault(); } }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!