如何使用 ng-animate 在菜单上添加幻灯片效果

Question

我正在尝试使用 ng-animate 和 CSS 样式实现幻灯片效果，但无法弄清楚我的代码有什么问题...

我可以使用min-height 和max-height 的百分比值来执行此操作吗？我不能在 px 中使用固定值。

JSFIDDLE

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
  <div class="menu" ng-show="collapsed" ng-animate="{show: 'menu-show', hide: 'menu-hide'}">
    <div class="files">
      <input type="checkbox" />
      <label>first</label>

      <input type="checkbox" />
      <label>second</label>
    </div>
    <div class="diffs">
      <input type="checkbox" />
      <label>first</label>

      <input type="checkbox" />
      <label>second</label>
    </div>
  </div>
</div>

CSS：

.menu-show-setup, .menu-hide-setup {
  transition:all 0.5s ease-out;
  overflow:hidden
}

.menu-show-setup {
  max-height:0;
}
.menu-show-setup.menu-show-start {
  max-height:25%;
}

.menu-hide-setup {
  max-height:25%;
}
.menu-hide-setup.menu-hide-start {
  max-height:0;
}

Answer 1

首先确保您已加载 angular 和 angular-animate。 角度动画的 CDN 是 ...

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>

那你需要引用ngAnimate给出的动画...

https://docs.angularjs.org/api/ngAnimate

例如，ng-if 当从 false 切换到 true 时，会将 .fade AND .ng-enter 类添加到 ng-if 所在的元素中。这些类将在短时间内自动删除。 ngAnimate 为你做这件事。

你要做的就是设计这些类的样式......

示例：

.fade.ng-enter {
  transition:0.5s linear all;
  opacity:0;
}

/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
  opacity:1;
}

现在 ng-animate 将从 .fade.ng-enter 动画到 .fade.ng-enter.ng-enter-active

如果你不定义这些样式，ng-animate 将什么都不做。 如果您在浏览器的开发工具中检查相关元素，您将看到由 ng-animate 添加和删除的类。如果您看不到这些类被添加和删除，那么您加载的 angular 或 ng-animate 有问题。