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

Posted 2023-03-06

【中文标题】AngularJs ul 使用幻灯片动画展开/折叠

【英文标题】：AngularJs ul expand/collapse with slide animation

【发布时间】：2015-01-05 20:52:56

【问题描述】：

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

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

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

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

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

【参考方案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>