MEAN.io 动画 Angular UI 折叠

Question

我一直在尝试 bootstrap 折叠（angular UI 实现）以在 MEAN.io 应用程序中显示和隐藏一口井。下面的显示和隐藏代码有效，但它不会为两种状态之间的转换设置动画。我想要一个平滑的动画过渡，但到目前为止我尝试过的一切都没有奏效。提前感谢您提供的任何帮助。

<button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div uib-collapse="isCollapsed">
    <div class="well well-lg">Some content</div>
</div>

Answer 1

您的 Angular 应用程序中可能缺少对 ngAnimate 的依赖：

angular.module('app', ['ngAnimate', 'ui.bootstrap']);

记得也加载对应的JavaScript:

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

MEAN.io 动画 Angular UI 折叠

MEAN.io animate Angular UI Collapse

angularjs

mean.io