為什么使用ngShow(angularjs)不增加大小的影片？

我有這個下拉串列，我希望對高度進行影片處理。我正在使用 max-height 來實作這一點，它有點作業，但是當它擴展時，它不會進行過渡。如果我減小尺寸（即回傳），那么它會很好地過渡。

我有這支帶有我正在使用的 html 和 css（更少）的

第一個選單的內容是“動態的”，因為它們可以是 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;
    }
  }
}

我也使用這個視頻作為影片的參考。

謝謝您的幫助

uj5u.com熱心網友回復：

最后終于弄明白了。我更改了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);
      }
    }

標籤：css angularjs 较少的 CSS动画

上一篇：在CustomElement/WebComponent中從Blazor呼叫控制器中注入的AngularJs服務

下一篇：EntityFrameworkCore不保存更新