动画滑入式面板

Question

I am playing around trying to emulate the type of side panels common in Admin Templates found on ThemeForest. 我正在尝试模拟在ThemeForest上的“管理模板”中常见的侧面板的类型。

Simply, there is a left menu which, on button click, will toggle between between 200px and 50px. 简单地说，有一个左侧菜单，单击该按钮将在200px和50px之间切换。 While at 50px hovering over the panel extends it back to 200px. 当以50像素悬停在面板上时，它将扩展回200像素。

There are two hidden right panels which get shown or hidden on clicking their relevant buttons. 有两个隐藏的右面板，单击相应的按钮即可显示或隐藏。 When one is opened, the other automatically gets closed. 当一个打开时，另一个自动关闭。

This all works fine but there is one snag. 一切正常，但有一个障碍。 As I have done this by using jQuery to switch classes, I had not factored in that you cannot animate these. 当我通过使用jQuery切换类来完成此操作时，我没有考虑到您无法设置这些动画。 I have tried things like show/hided, slideToggle etc but this always adds 'disply:block' to the element so it does not appear correctly. 我尝试过诸如show / hided，slideToggle等操作，但这总是向元素添加'disply：block'，因此它无法正确显示。

Can anyone advise on what I can do to allow me to get the panels to appear smoothly rather than just appear? 谁能建议我可以做些什么以使面板平滑显示而不是仅仅显示？ Even if it means changing everything I have done so far! 即使这意味着改变我到目前为止所做的一切！

There is a fiddle at http://jsfiddle.net/f67rdxd5/1/ and the full code is below. http://jsfiddle.net/f67rdxd5/1/上有一个小提琴，下面是完整的代码。

Thanks in advance for any help. 在此先感谢您的帮助。

Steve 史蒂夫

CSS 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 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 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

You could use CSS transition or animation. 您可以使用CSS过渡或动画。 here is a link that tells you how to do css transition. 这是一个告诉您如何进行CSS转换的链接。 http://css-tricks.com/almanac/properties/t/transition/ http://css-tricks.com/almanac/properties/t/transition/

Here is a simple jsfiddle that uses css transition with it working. 这是一个简单的jsfiddle，它使用css过渡来工作。

http://jsfiddle.net/rgqdxdoe/ 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 个解决方案

解决方案1
0 2015-01-16 22:33:25

动画滑入式面板

问题描述

1 个解决方案

解决方案1 0 2015-01-16 22:33:25

解决方案1
0 2015-01-16 22:33:25