css - 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

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

感谢您的帮助。

Answer 1

更新:

经过一些尝试和错误，我想我找到了 SOLUTION .如果您不是为 (sub-menu) 您的 md-menu-item 周围的 div 设置动画，而是为元素本身设置动画，它将起作用。

我刚刚将 ng-if="menuIsOpen===1" 添加到您的 md-menu-item(删除了 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.您可以更改高度并添加 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 它将从顶部而不是从中间缩放。但是每次更改菜单项的数量时都必须调整高度。

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

只有样式缺失，一切正常。

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