css 展开菜单动画效果

Question

我有个菜单，当点击父级的时候展开子菜单，我现在用的display但是我觉得过渡效果太生硬了，我想用动画来解决。但试了没有解决掉！
子菜单是没有高度的，它的高度都是用子菜单的项目个数撑起来的，我想当点击父级的时候能展开子菜单，然后有过渡效果，以不至于那么生硬啦！！！

Answer 1

未知高度，如何做slideDown的效果？

Answer 2

可以试试jq的animate()

Answer 3

有个相对简单的办法 , 子菜单默认display:block; 但是height : 0 ; overflow hidden , 对height加transition过度 , 然后js控制宽度就行了;如果子菜单展示固定高度的话就更好了 , 直接用animation就可以了

Answer 4

建议还是给个最大高度 动画效果jquery的slideUp slideDown蛮好用

Answer 5

元素配合下面几个属性即可
opacity: 0;
visibility: hidden;pointer-events: none;（这两个随意选择一个 后面那个ie老版本不支持 但效果是最好）
transition:0.3s all;

hover的时候
opacity:1;
visibility:visible;pointer-events:auto;