为什么不使用ngshow（angularjs）增加大小的尺寸？

Question

我有这个下拉列表，我希望高度被动画。我正在使用Max-Height来实现这一目标，并且有点有效，但是当它扩展时，它不会进行过渡。如果我降低尺寸（即返回），则它的过渡就可以了。

我有这个 pen 用我正在使用的html和css（更少）。动画在那里不起作用，但代码与我在下一个GIF中的代码相同。

第一个菜单的内容是“动态”的，因为它们可以是1、2或3，因此我使用不同类别定义了不同的高度。

这是CSS：

.content-management-dropdown {
  position: absolute;
  margin-top: 1rem !important;
  top: 2;
  right: 2.5rem;
  width: 17rem;
  box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.175);
  background-color: #ffffff;
  overflow: hidden;

  .menu-primary {
    width: 100%;

    &.ng-hide-remove {
      position: absolute;
      transform: translateX(-110%);
    }

    &.ng-hide-remove-active {
      transform: translateX(0%);
      transition: all 500ms ease;
      // max-height: 3.7rem;

      // &.menu-2-item {
      //   max-height: calc(3.7rem * 2);
      // }

      // &.menu-3-item {
      //   max-height: calc(3.7rem * 3);
      // }
    }

    &.ng-hide-add {
      position: absolute;
      max-height: 3.7rem;
      &.menu-2-item {
        max-height: calc(3.7rem * 2);
      }

      &.menu-3-item {
        max-height: calc(3.7rem * 3);
      }
    }

    &.ng-hide-add-active {
      transform: translateX(-110%);
      transition: all 500ms ease;
      max-height: 27rem;
    }
  }

  .menu-secondary {
    &.ng-hide-remove {
      transform: translateX(110%);
      transition: all 500ms ease;
    }

    &.ng-hide-remove-active {
      transform: translateX(0%);
      transition: all 500ms ease;
    }

    &.ng-hide-add {
      max-height: 27rem;
    }

    &.ng-hide-add-active {
      transform: translateX(110%);
      transition: all 500ms ease;

      max-height: 3.7rem;

      &.menu-2-item {
        max-height: calc(3.7rem * 2) !important;
      }

      &.menu-3-item {
        max-height: calc(3.7rem * 3) !important;
      }
    }
  }

  ul {
    padding: 0;
  }

  &__list-item {
    padding: 0.6rem 0;
    list-style: none;
    border-bottom: 0.1rem solid black;
    transition: background 500ms;
    cursor: pointer;
    display: flex;
    align-items: center;

    & > * {
      display: block;
      padding: 0.3rem 2rem;
      text-transform: none !important;
    }

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #edf1f5;
    }
  }
}

我还在使用 this 视频作为动画的参考。

感谢您的帮助

Answer 1

终于最终弄清楚了。
我更改了CSS，辅助菜单是唯一控制高度的菜单。然后我对高度遇到了问题，事实证明，其中一个高度只是被较小的高度覆盖。

这是菜单的最后CSS：

.menu-primary {
    width: 100%;

    &.ng-hide-remove {
      position: absolute;
      transform: translateX(-110%);
    }

    &.ng-hide-remove-active {
      transform: translateX(0%);
      transition: all 500ms ease;
    }

    &.ng-hide-add {
      position: absolute;
    }

    &.ng-hide-add-active {
      transform: translateX(-110%);
      transition: all 500ms ease;
    }
  }

  .menu-secondary {

    &.ng-hide-remove {
      transform: translateX(110%);
      max-height: 3.7rem;

      &.menu-2-item {
        max-height: calc(3.7rem * 2);
      }

      &.menu-3-item {
        max-height: calc(3.7rem * 3);
      }
    }

    &.ng-hide-remove-active {
      transform: translateX(0%);
      transition: all 500ms ease;
      max-height: 27rem !important;
    }

    &.ng-hide-add {
      max-height: 27rem;
    }

    &.ng-hide-add-active {
      transform: translateX(110%);
      transition: all 500ms ease;

      max-height: 3.7rem;

      &.menu-2-item {
        max-height: calc(3.7rem * 2);
      }

      &.menu-3-item {
        max-height: calc(3.7rem * 3);
      }
    }