Javascript 如何将动画添加到此手风琴？

所以我在互联网上找到了这个很棒的手风琴，我想通过动画让它更棒。 我对动画很陌生，所以我不能对它抱太大的兴趣。我将如何使用来自的SlideDown动画

我在网上找到的手风琴

我试过的。 我试着改变主意

.accordion:target{display:block;}

由此

#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}

对此

#accordion{margin:100px auto;width:400px;}
#accordion ul{list-style:none;margin:0;padding:0;}
.accordion{display:none;}
.accordion:target{display:block; animation-name: bounce; transform-origin: center bottom;}
#accordion ul li a{text-decoration:none;display:block;padding:10px;}
.accordion{padding:4px;}

我试着玩弄它，但似乎什么也没用。 我如何以支持的方式来做这件事

编辑 我让它工作了，但有个小问题。。 我的箱子只能装100磅。。我试着把它改成自动，但这消除了滑动效果

这是我换的

.accordion:target{-webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; height: 100px}

正如你所看到的，框的大小不会随着文本的数量而改变。 最后一个正在溢出。

---

使用css高度属性和过渡。将“高度”设定为零以隐藏元素。使用不同的类并用javascript更改它们

不能为具有display:none属性的元素设置动画。下面是一个简单的动画，用于设置不透明度和高度值的动画

.accordion {
  opacity: 0;
  height: 0;
  transition: all 500ms ease;
  padding: 0;
}

.accordion:target {
  opacity: 1;
  height: 100px;
  padding: 4px;
}

如果要使用animate.css库，则需要使用Javascript，并在用户单击元素时将例如：.slideInUp和.animated类添加到元素中

身体{ 背景：d0d5； } /*基本结构 =====================*/ 手风琴{ 保证金：100像素自动； 宽度：400px； } 手风琴{ 列表样式：无； 保证金：0； 填充：0； } .手风琴{ 不透明度：0； 身高：0； 过渡：所有500ms缓解； 填充：0； } .手风琴：目标{ 不透明度：1； 高度：100px； 填充：4px； } 手风琴{ 文字装饰：无； 显示：块； 填充：10px； } /*颜色 ====================*/ 手风琴{ /*盒影*/ -webkit盒阴影：0 4px 10px BDBD； -moz盒阴影：0 4px 10px BDBD； 盒影：0 4px10px BDBDBD； /*边界半径*/ -webkit边界半径：5px； -moz边界半径：5px； 边界半径：5px； } 手风琴{ 背景：fff； 边框底部：1px实心E0； 颜色：999； } .手风琴{ 背景：fdfd； 颜色：999； } .手风琴：目标{ 边框顶部：3倍实心FFCDCD； } Lorem ipsum dolor sit amet，奉献精英。在产程中，动物无面部、透明体和其他部位的胎膜在发生积血时会发生变化。 Lorem ipsum dolor sit amet，奉献精英。在产程中，动物无面部、透明体和其他部位的胎膜在发生积血时会发生变化。 Lorem ipsum dolor sit amet，奉献精英。在产程中，动物无面部、透明体和其他部位的胎膜在发生积血时会发生变化。

---

无法从显示转换：无；使用高度、不透明度、zindex或类似的东西来隐藏它，而不是disp:none。你可以只使用一个简单的css转换，不需要另一个外部…这很好，但是我使用了一个不同的方法，你介意检查我的编辑吗？你可以设置每个div有自己的高度