Question

我想尝试在 ng-show 更改时为ul 高度设置动画效果，以进行幻灯片效果动画。
我最初的想法是从高处设置动画高度：0到高度：100％或高度：自动但它不起作用..

this post，说不可能只为绝对值设置百分比的动画。

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

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

任何想法如何制作任何ul的幻灯片（高度）动画，无论它包含多少个。{/ p>

Answer 1

这里做了一些指导 - 动画自动而不使用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)
                                                }
                                        }
                                }


                        });
                    }
            };
        });

是：

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

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

1 个答案: