Question

我正在试图模仿在ThemeForest上找到的管理模板中常见的侧面板类型。

简单地说，有一个左侧菜单，按下按钮，将在200px和50px之间切换。当50px在面板上方盘旋时，将其延伸回200px。

有两个隐藏的右侧面板在单击相关按钮时显示或隐藏。当一个打开时，另一个自动关闭。

这一切都很好，但有一个障碍。正如我通过使用jQuery来切换类所做的那样，我没有考虑到你无法动画这些。我已经尝试过show / hided，slideToggle等内容，但这总是会在元素上添加'disply：block'，因此它无法正确显示。

任何人都可以建议我能做些什么让我让面板显得顺畅而不仅仅是出现？即使这意味着改变我到目前为止所做的一切！

http://jsfiddle.net/f67rdxd5/1/有一个小提琴，完整的代码在下面。

提前感谢您的帮助。

史蒂夫

CSS

/* Top Navigation -------------------------------------------*/
 .top-menu {
    height: 36px;
    background-color: #333333;
    font-family: Oswald;
    font-size: 14px;
    color: #ffffff;
    text-decoration: none;
}
}
/* Header ---------------------------------------------------*/
 header {
    background-color: #efefef;
}
/* main-content Navbar ----------------------------------------------*/
 .navbar {
    margin-bottom: 0;
}
/* Sidebar */
 aside.fixed {
    position: fixed;
}
.sidebar {
    background: #58595b;
    z-index: 99;
}
.left-sidebar, .menu-closed .left-sidebar.hover {
    width: 200px;
    float: left;
    position: absolute;
    left: 0;
    height: 100%;
    overflow: visible!important;
}
.menu-closed .left-sidebar {
    width: 60px;
}
header {
    z-index: 2;
    min-height: 30px;
    padding: 10px 21px;
    background: #fafafa;
    border-bottom: 1px solid #e0e0e0;
}
#main-content {
    background: #f9f9f9;
    padding-top: 15px;
    height: 100%;
    min-height: 900px;
    padding-left : 200px;
}
.menu-closed #main-content {
    padding-left: 60px;
}
.titlebar {
    height: 20px;
}
.container {
    width: 100%;
}
.chat-sidebar.closed, .settings-sidebar.closed {
    display: none;
}
.chat-sidebar.open, .settings-sidebar.open {
    overflow: hidden;
    position: absolute;
    top: 36px;
    bottom: 0;
    right: 250px;
    width: 250px;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
    border-left: 1px solid #eee;
    box-shadow: 1px 0 1px rgba(0, 0, 0, .1);
    padding: 15px 20px;
}

HTML

<body id="">
    <!-- Outer Wrapper to set layout width -->
    <div id="outerWrapper">
        <!-- Top Navigation Bar -->
        <div class="top-menu">
            <button id="left-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span>

            </button>
            <button id="chat-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>

            </button>
            <button id="settings-toggle" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>

            </button>
        </div>
        <!-- .topNav -->
        <div id="main-wrapper" class="menu-open">
            <!-- Left Sidebar -->
            <aside class="sidebar left-sidebar">
                 <h4>Left menu</h4>

            </aside>
            <!-- /.left-sidebar -->
            <div id="main-content">
                <!-- Header -->
                <header>
                    <div class="titlebar">PHP/MYSQL SERVER EXAMPLE</div>
                </header>
                <!-- .Header -->
                <!-- Main Panel -->
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="content-panel">
                                <div class="content-panel-header">
                                     <h4>Text Content.</h4>

                                </div>
                                <!-- /.content-panel-header -->
                                <!-- Content Area -->ytuyutyutyuytuyt
                                <!-- End Content Area -->
                            </div>
                            <!-- /.main-content -->
                        </div>
                        <!-- /.col-md-12 -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /#main-content -->
            <!-- Right Sidebar -->
            <aside class="sidebar chat-sidebar closed">
                 <h3>Chat</h3>

            </aside>
            <aside class="sidebar settings-sidebar closed">
                 <h3>Settings</h3>

            </aside>
            <!-- /.right-sidebar -->
        </div>
        <!-- /#main-wrapper -->
        <!-- jQuery and other plugins -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!-- Sitewide Scripts -->
        <script src="js/global.js"></script>
        <!-- Page Level Scripts -->
</body>

的jQuery

/*-----  Open and close the side Menus  ------*/

/*-----  The left menu is controlled by ------*/
/*-----  switching the main-wrapper div ------*/
/*-----  classes between menu-open and  ------*/
/*-----  menu-closed  ------*/
$('#left-toggle').click(function (event) {
    $("#main-wrapper").toggleClass('menu-open menu-closed');
    return false;
})

//If the left menu is closed, open it when hovered over
$('.left-sidebar').hover(

function () {
    $(".left-sidebar").addClass('hover')
},

function () {
    $(".left-sidebar").removeClass('hover')
})



/*-----  The right menus are controlled ------*/
/*-----  by switching the classes       ------*/
/*-----  between open and closed on     ------*/
/*-----  each of the right side menus   ------*/


//If the chat button is clicked, add open to 
//Chat sidebar and closed to all others
$('#chat-toggle').click(function (event) {
    $(".chat-sidebar").toggleClass('open closed');
    $(".settings-sidebar").removeClass('open').addClass('closed');
    return false;
})

//If the settings button is clicked, add open to 
//Settings sidebar and closed to all others  
$('#settings-toggle').click(function (event) {
    $(".settings-sidebar").toggleClass('open closed');
    $(".chat-sidebar").removeClass('open').addClass('closed');
    return false;
})

Answer 1

您可以使用CSS过渡或动画。这是一个链接，告诉你如何进行css转换。 http://css-tricks.com/almanac/properties/t/transition/

这是一个简单的jsfiddle，它使用css过渡功能。

http://jsfiddle.net/rgqdxdoe/

$(document).ready(function(){
$('.Side-bar').click(function(){
    if($('.Side-bar').hasClass('close')){
         $('.Side-bar').addClass('open');
          $('.Side-bar').removeClass('close');   
    }else{
        $('.Side-bar').addClass('close');
         $('.Side-bar').removeClass('open');
    }
});
});

.Side-bar{

    background-color: grey;
    height: 500px;
}
.close{
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    width: 30px;
}
.open{
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
    width: 100px;
}

动画滑入式面板

1 个答案: