javascript - 为什么我的侧面导航菜单不会用这个 jquery 幻灯片效果隐藏？

Question

我有一个侧面导航菜单(在此页面上:http://layouthuprising.org/about.php)，当用户单击屏幕右上角的菜单按钮时，它会滑入 View (当浏览器窗口窄于 900 像素时，菜单按钮会出现) ).我想对其进行编码，以便当用户按下“关闭 x”按钮时，侧面导航菜单会滑出 View ，就像它滑入的方式一样。我尝试使用这个 jquery 动画:

$(mySidebar).hide('slide', {direction: 'left'}, 1000);

我尝试了这个 jquery 触发的 css 动画:

$(mySidebar).addClass("mySidebar-animate-right");

但似乎两者都不起作用。有什么办法可以让侧边导航菜单顺利滑出吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <!-- color change animator -->

<style>

@media (max-width:4000px) and (min-width:980px){
    #mySidebar{display:none !important;}
}

.side_nav_menu_button{
    width: 100%;
    display: block;
    padding: 8px 16px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    user-select: none;
}

.side_nav_menu_button:hover{
    color: #000!important;
    background-color: #f1f1f1 !important;
}

.side_nav_close_link{
    font-size: 18px; 
    padding: 16px 16px !important; 
}

#mySidebar{
    color: #ffffff! important;
    background-color: #1e324a !important;
    top: 0px;
    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    height: 100%;
    width: 200px;
    position: fixed!important;
    z-index: 1;
    overflow: auto;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;        
}

.mySidebar-animate-left{
    position:relative;
    animation:animateleft 0.4s
}

.mySidebar-animate-right{
    position:relative;
    animation:animateright 0.4s
}

@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}    
@keyframes animateright{from{left:0px;opacity:1} to{left:-300px;opacity:0}}     

</style>


<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="mySidebar-animate-left" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="closeSideNav()" class="side_nav_close_link side_nav_menu_button">Close ×</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/about.php">ABOUT US</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/ourwork.php">OUR WORK</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/news.php">NEWS</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/resources.php">RESOURCES</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/stories.php">STORIES</a>
  <a onclick="closeSideNav()" class="side_nav_menu_button" href="http://layouthuprising.org/contribute.php">CONTRIBUTE</a>
</nav>


<script>

// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");

function openSideNav() {
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

// Close the sidebar with the close button
function closeSideNav() {
    //$(mySidebar).hide();
    //$(mySidebar).removeClass("mySidebar-animate-left");
    //$(mySidebar).addClass("mySidebar-animate-right");
    //$(mySidebar).hide('slide', {direction: 'left'}, 1000);
    //$(mySidebar).toggle('slide',{direction:'left'}, 300);
    mySidebar.style.display = "none";
}


</script>

Answer 1

试试看

.mySidebar-animate-left {
   position: fixed;
   left: 0;}



.mySidebar-animate-right {
    position: fixed;
    left: -300px;}

function openSideNav() {
    $(mySidebar).removeClass("mySidebar-animate-right");
    $(mySidebar).addClass("mySidebar-animate-left");
}

// Close the sidebar with the close button
function closeSideNav() {

    $(mySidebar).removeClass("mySidebar-animate-left");
    $(mySidebar).addClass("mySidebar-animate-right");
}

您可以删除@keyframes 部分。在 CSS 和 JS 中制作动画的最简单方法是通过 JavaScript 更改其 CSS 属性(如左、右、宽度等)并向元素添加过渡属性。您可以通过删除/添加新类或仅更改特定的 css 属性来实现。