CSS - <li>可见性变化的“滑出”动画[重复]答案

【问题标题】：CSS - "slide-out" animation on <li> visibility change [duplicate]CSS - <li>可见性变化的“滑出”动画[重复]
【发布时间】：2016-04-26 00:17:43
【问题描述】：

我正在开发一个顶部带有导航栏的网页，其中包含一个包含内联 <li> 元素的 <ul> 元素。我想指定其中两个列表项在单击时“滑出”，从而显示其他列表项。

现在，我正在通过将附加项目包括为 <li> 元素来执行此操作，这些元素在页面加载时隐藏。绑定到两个列表项的单击事件会切换这些附加元素的可见性。这个解决方案效果很好，但我想让事情更流行一点，让这些额外的列表项水平滑入和滑出列表，就像抽屉一样。

我阅读了transition CSS 属性，但似乎它们与特定的 CSS 属性相关联——这意味着滑动动画需要改变位置，而我现在在技术上没有这样做。这是正确的，还是我可以使用什么技巧来获得滑动动画？

谢谢！

【问题讨论】：

任何代码都可以使用？也许是 CSS ？到底有什么问题？
你不能transition CSS display 属性。您需要使用 javascript/jquery。
听起来您需要更改 li 的位置或边距。
您可能需要查看overflow 和transform: translate 来完成此操作。 translate 比位置或边距动画要好得多，它技术上不会移动您的元素，只是视觉上。
谢谢 - 我认为 jQuery 的 toggle() 或 show()/hide() 函数应该能满足我的需要。

标签： javascript jquery html css

【解决方案1】：

当这些 li 具有特定的类时，您可以通过 CSS 对其进行动画处理，您可以在单击按钮后将其添加到元素中，如下所示：

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/

【讨论】：