点击按钮-侧边组件面板实现展开收缩动画

最新推荐文章于 2021-11-04 22:56:01 发布

原创最新推荐文章于 2021-11-04 22:56:01 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

一些demo 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML, CSS和JavaScript实现的侧边栏动画效果。通过按钮点击触发，侧边栏能在屏幕左侧平滑地展开和隐藏，提供了一个简洁的用户交互体验。

HTML:

<button class="pull-out-btn"></button>
<div class="list-panel list-panel-hidden"></div>

CSS:

.list-panel{
    position: absolute;
    left: 0;
    top: 0;
	width: 300px;
	height: 100%;
    transition: all .2s;
}
.list-panel-hidden{
    transform: translateX(-300px);
}

js:

/*组件展开收起动画*/
function sideListAnimation() {
    var $listPanel = $('.list-panel'),
        $listPanelInOutBtn = $('.pull-out-btn');
    $listPanelInOutBtn.click(function () {
        if ($listPanel.hasClass('list-panel-hidden')){
            $listPanel.removeClass('list-panel-hidden');
        } else {
            $listPanel.addClass('list-panel-hidden');
        }
    });
}
sideListAnimation();