Question

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

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

<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

首先确保您已加载角度和角度动画。角度动画的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添加和删除的类。如果您无法看到这些类被添加和删除，那么加载角度或动画时会出现问题。

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

1 个答案: