为什么 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);
      }
    }

为什么 ngShow (angularjs) 不增加尺寸动画？

Why isn't the size increase animating with ngShow (angularjs)?

css

less

css-animations

angularjs