AngularJs ul expand/collapse with slide animation

Question

I'm trying to animate the ul height when ng-show changed, for slide effect animation.
My initial idea was to animate the height from height:0 to height:100% or height:auto but it's not working..

this post, says that it's impossible to animate the percentages, only absolute value.

And this is not look like an elegant and clean solution.

The solution to "animate the max-height to something bigger than your box will ever get", it's also not good solution, because the animation duration will be depend on the number of li in ul.

Any idea how I can make the slide (height) animation for any ul no matter how many li's it contains.

score 0 · Answer 1 · answered Nov 20 '14 at 08:10

Here some directive that doing the work - animation to auto without using max-height/width

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)
                                                }
                                        }
                                }


                        });
                    }
            };
        });

Using:

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

AngularJs ul expand/collapse with slide animation

1 Answers1