如何使用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动画。角度动画的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和.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的加载有问题。