侧边菜单切换过渡效果？

Question

我正在设计一个带有Phonegap的应用程序，它允许我用HTML5，CSS3和JS编写代码。我创建了一个切换菜单，当点击时，它会显示和隐藏自己。这是通过添加"display: none“和"display: inline-block”属性来实现的。我已经阅读了其他的帖子，他们回复了如何向这样的属性添加过渡。我的问题是，我完全不知道需要在哪里添加CSS属性，因为我在.css文件中有一个脚本标记。有什么想法吗？:)

下面是我的代码：

​

/* This script is written in my HTML file inside a <script> tag*/

/* My JS */
            function openSlideMenu() {
                $('#side-menu').css({"display": "inline-block"});
            }

            function closeSlideMenu() {

                $('#side-menu').css('display','none');

            }

        $(document).ready(function() {

        });

        app.initialize();

.side-nav {
	box-sizing: border-box;
	z-index: 6000;
	position: absolute;
	height: 100vh;
	width: 70%;
	background-color: #7b66db;
    background-image: -moz-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: -webkit-linear-gradient(135deg, #7b66db 4%, #9673fb 100%);
    background-image: linear-gradient(135deg, #7b66db 0%, #9673fb 100%);
    -webkit-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	-moz-box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
	box-shadow: 4px 0px 10px -2px rgba(0,0,0,0.49);
}

<!-- MY IMAGES WON'T SHOW BECAUSE I HAVE THEM IN MY LOCAL FILES. THE IMAGE THAT SHOULD SHOW IS AN "X" ICON FOR CLOSE. -->

<!-- Side Nav Menu -->
        <div class="side-nav" id="side-menu">
            <div class="top-bar">
  
                <div class="vpay-logo-div">
                    <a href="#">
                        <img src="img/vpay-logo.png" class="vpay-logo" alt="Brand Logo">
                    </a>
                </div>
                <div class="close-icon-div">
                    <a href="#" class="btn-close" onclick="closeSlideMenu()">              
                      <img src="img/close-icon.png" class="close-icon-nav" alt="Close Icon">
                    </a>
                </div>
            </div>
            <nav>
                <ul>
                  <li>List item</li>
                </ul>
            </nav>
        </div>
        <!-- /Side Nav Menu -->

​

Answer 1

我真的不知道如何使用Phonegap创建应用程序，但如果你使用Jquery，我可以看到，当你点击按钮时，你可以将切换函数documentation here

$(document).ready(function() {
   $('#button-open-and-close-menu').click(function(){
       $('#side-menu').toggle(200);
   });
});

您也可以使用动画函数documentation here来制作类似于从左侧开始的幻灯片效果

$(document).ready(function() {
   $('#button-open-and-close-menu').click(function(){
        $('#side-menu').animate({width:'toggle',marginLeft:'0'},300);
   });
});
//CSS
#side-menu {
   margin-left : -100%;
}