AngularJs ul 使用幻灯片动画展开/折叠

Question

当 ng-show 更改时，我正在尝试为 ul height 设置动画，用于幻灯片效果动画。
我最初的想法是将高度从 height:0 设置为 height:100% 或 height:auto 但它不起作用..

this post，表示无法为百分比设置动画，只能设置绝对值。

而this is 看起来不像是一个优雅而干净的解决方案。

“将最大高度设置为比你的盒子更大的东西”的解决方案，这也不是好的解决方案，因为动画持续时间将取决于 ul 中的 li 数。

知道如何为任何ul 制作幻灯片（高度）动画，无论它包含多少 li。

Answer 1

这里有一些做这项工作的指令 - 动画自动而不使用最大高度/宽度

angular.module('kControlModule').directive("kAutoAnimation", function ()
        {
            return {
                restrict: 'A',
                scope: {
                    animateChanged: '=',
                    type: '@'//height /width
                },
                link: function (scope, element, attrs)
                    {
                        var isFirstTime = true;
                        var elementHeight;
                        var elementWidth;

                        if (_.isUndefined(scope.type))
                            {
                                scope.type = "height";
                            }

                        scope.$watch('animateChanged', function (newVal)
                        {
                            if (scope.type == "height")
                                {
                                    if (isFirstTime)
                                        {
                                            elementHeight = $(element).height();
                                            $(element).css('height', 0)
                                        }
                                    if (newVal)//isShow
                                        {
                                            if (isFirstTime)
                                                {
                                                    $(element).height(elementHeight);
                                                    isFirstTime = false;
                                                }
                                            else
                                                {
                                                    elementHeight = $(element).css('height', 'auto').height();
                                                    $(element).css('height', 0)
                                                    $(element).animate({ height: elementHeight }, 400)
                                                }
                                        }
                                    else
                                        {
                                            if (isFirstTime)
                                                {
                                                    $(element).height(0);
                                                    isFirstTime = false;
                                                }
                                            else
                                                {
                                                    $(element).animate({ height: 0 }, 250)
                                                }
                                        }
                                }
                            else//width
                                {
                                    if (isFirstTime)
                                        {
                                            elementWidth = $(element).width();
                                            $(element).css('width', 0)
                                        }
                                    if (newVal)//isShow
                                        {
                                            if (isFirstTime)
                                                {
                                                    $(element).width(elementWidth);
                                                    isFirstTime = false;
                                                }
                                            else
                                                {
                                                    elementWidth = $(element).css('width', 'auto').width();
                                                    $(element).css('width', 0)
                                                    $(element).animate({ width: elementWidth }, 400)
                                                }
                                        }
                                    else
                                        {
                                            if (isFirstTime)
                                                {
                                                    $(element).width(0);
                                                    isFirstTime = false;
                                                }
                                            else
                                                {
                                                    $(element).animate({ width: 0 }, 250)
                                                }
                                        }
                                }


                        });
                    }
            };
        });

使用：

 <div  k-auto-animation animate-changed="showCommands">
       ...                     
  </div>