javascript - CSS-<li>可见性更改的“滑出”动画

This question already has answers here:

jQuery .slideRight effect
                                
                                    （2个答案）
                                
                        
                                3年前关闭。
            
                    
我正在一个带有顶部导航栏的网页上，导航栏由一个包含嵌入式<ul>元素的<li>元素组成。我想指定其中两个列表项以在单击时“滑出”，以显示其他列表项。

现在，我通过将其他项目作为<li>元素包括在页面加载时隐藏的方式来实现。绑定到两个列表项的click事件切换了这些其他元素的可见性。此解决方案效果很好，但是我想让事情流行一些，并使这些其他列表项像抽屉一样水平滑入和滑出列表。

我读到了transition CSS属性，但似乎它们与特定的CSS属性相关联-这意味着滑动动画需要更改位置，从技术上来说，我现在不这样做。那是正确的，还是我可以使用一种技巧来获得该滑动动画？

谢谢！

最佳答案

当这些li项具有特定类时，可以通过CSS为li项设置动画，在单击按钮后将其添加到元素中，如下所示：

CSS：

/* default behavior */
li li {
  position: relative;
  left: -10px;
  opacity: 0;

  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* slide out */
li.active {
  opacity: 1;
  left: 0;
}

JS：

$(document).ready(function(){
    $(".button").on("click", function(e){
        $(e.target).find("li").toggleClass("active");
    })
});

演示https://jsfiddle.net/0vy8emam/7/

关于javascript - CSS-<li>可见性更改的“滑出”动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36845578/