ng-show 跟不上 ng-animation 在下拉列表中的缩小

Question

我有一个下拉菜单，我希望在下拉菜单打开和关闭时显示按比例缩小的动画。我有一个 CODEPEN here，其中包含供您试验的代码。

我把它减慢到 10 秒的动画（显然不是最终速度）只是为了让你明白我的意思。这些项目正在按照我指示的速度（10 秒）缩小，但在 ng-animation 完成之前，下面的项目不会下降。这导致重叠。

这是我的 HTML

<div class="cnt">
    <md-list ng-click="menuIsOpen = 1" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu" ng-show="menuIsOpen===1" ng-animate="'animate'" >
        <md-menu-item ng-repeat="item in data"  >
            <md-button>
                <div layout="row" flex="">
                    <a ui-sref="{{item.link}}">
                        <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                    </a>
                </div>
            </md-button>
        </md-menu-item>
    </div>

    <md-list ng-click="menuIsOpen = 2" layout="row" layout-padding="" class="layout-row" layout-align="start center" flex> 
        <span class="title flex" flex=""> Menu Item 2</span>
        <i class="fa fa-chevron-down"></i>
    </md-list>
    <div class="sub-menu" ng-show="menuIsOpen===2" ng-animate="'animate'" >
        <md-menu-item ng-repeat="item in data">
            <md-button>
                <div layout="row" flex="">
                    <a ui-sref="{{item.link}}">
                        <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                    </a>
                </div>
            </md-button>
        </md-menu-item>
    </div>
</div>

还有 CSS

.ng-hide-remove {
    -webkit-animation:2s scaleIn ease;
    animation:2s scaleIn ease;
}

@-webkit-keyframes scaleIn {
    From {
        transform-origin:  top;
        -webkit-transform: scaleY(0);
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        transform: scaleY(0);
    }
    To {
        transform-origin:  top;
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes scaleIn {
    From {
            transform-origin:  top;
          -webkit-transform: scaleY(0);
          -moz-transform: scaleY(0);
          -ms-transform: scaleY(0);
          -o-transform: scaleY(0);
          transform: scaleY(0);
    }
        To {
          transform-origin:  top;
          -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}

我基本上是在尝试重现与在 angular material 网站上看到的相同的动画 here

p.s。任何不需要整体改变太多的不同方法或想法，我都愿意接受。我希望进行 css 修改，但我知道这毕竟不是那么容易。不过我很有希望:)

感谢您的帮助。

Answer 1

更新：

经过反复试验，我想我找到了 SOLUTION。如果你不是为你的 md-menu-item 周围的 div 设置动画，而是为项目本身设置动画，它将起作用。

我刚刚将 ng-if="menuIsOpen===1" 添加到您的 md-menu-item（从 sub-menu 中删除了 ng-show="menuIsOpen===1）并更改了如下动画：

md-menu-item.ng-enter{
    -webkit-animation:3s move ease;
    animation:3s move ease;
}

@-webkit-keyframes move {
    From {
        margin-bottom:-50px;
    }
    To {
        margin-bottom:0px;
    }
}


@keyframes move {
    From {
        margin-bottom:-50px;
    }
    To {
        margin-bottom:0px;
    }
}

现在菜单中每个项目的大小都是动画的。我用 margin-bottom 作弊了一点，但 height 仍然没有用。

我想你有两个选择。（至少我想不出更多了。）或者三个，见上文。

1.You 可以改变高度并添加 transform-origin: top; 就像这里：

    @keyframes scaleIn {
  From {
     transform-origin:  top;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    height: 0px;
  }
  To {
     transform-origin:  top;
    -webkit-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
    height: 190px;
  }
}

对于 transform-origin 它将从顶部而不是从中间缩放。但是每次更改菜单项的数量时都必须调整高度。

你写新的（对你来说可能没什么，因为你不会改变太多）。我认为肯定有更简单的解决方案，例如您发布的示例。例如见 HERE

只是缺少样式，一切正常。

我也尝试将高度更改为 %，但那根本行不通。即使添加一些 divs 并更改一些位置也没有任何反应。所以也许其他人有更好的解决方案。

Answer 2

希望我没有放慢速度，只是有时间好好看看这个。

Edited Codepen

现在开始您的主要问题是使用 CSS 动画而不是过渡。当您从一种状态（打开）转换到另一种状态（关闭）时，转换会更好。而不是没有定义开始或结束状态的复杂动画。

所以我所做的就是改变你的 classes:

.sub-menu{
    background: #333;
    max-height: 500px;
    position: relative;
    display: block;
    overflow:hidden;
}
.sub-menu.ng-hide{
max-height: 0;
}

.sub-menu.ng-hide-remove {
    transition: max-height 700ms cubic-bezier(0.35, 0, 0.25, 1);
}

.sub-menu.ng-hide-add {
    transition: max-height 600ms cubic-bezier(0.35, 0, 0.25, 1);
}

他们现在使用 transisiton。以及 max-height 而不是 height，因此无需向 submenu 提供特定的 height 值即可完全显示它。还使用 cubic-bezier 进行更平滑的过渡。

我还删除了元素上的 ng-animate="'animate'" 指令，因为不需要它，这是添加动画的旧方法。所有 classes 现在都由 ng-show 指令管理，没有 ng-animate 指令。 current ngAnimate docs 可以提供有关 classes 的更多信息。

唯一的其他更改是将 ng-show 移动到 div 和 submenu class，这只是一个额外的 class不需要为 <ul> 创建。

ng-show 跟不上 ng-animation 在下拉列表中的缩小

ng-show doesn't keep up with ng-animation for scaling down in a dropdown

css

ng-animate