angularjs - Angular - 动画 ng-show

Question

我有这个使用 Angular 和 Bootstrap 的简单 HTML 标记：

Toggle panel: <input type="checkbox" ng-model="toggle"><br/>
<br/>
<div class="container">
    <section id="content">
        <div class="panel panel-default animate-show" ng-show="toggle">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title1</h3>
            </div>        
            <div class="panel-body">        
                Content1        
            </div>
        </div>        
        <div class="panel panel-default animate-show" ng-hide="toggle">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title2</h3>
            </div>        
            <div class="panel-body">        
                Content2        
            </div>
        </div>
        <div class="panel panel-default">                
            <div class="panel-heading">
                <h3 class="panel-title">Panel title3</h3>
            </div>        
            <div class="panel-body">        
                Content3  
            </div>
        </div>
    </section>
</div>

还有这个小的 Angular 控制器：

function MainController($scope) {
  $scope.toggle = true;
}

请参阅此 JSFiddle：http: //jsfiddle.net/dennismadsen/1hr9q1ra/1/。

当面板显示/隐藏时，如何在面板上添加动画？

Answer 1

我让它在这里工作。

不过有几句话-自从我使用ng-animate模块以来，我将 angular 版本更改为 1.3。

基本上只是添加了这个css：

.panel {
  padding:10px;
  border:1px solid black;
  background:white;
}

.panel {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.panel.ng-hide {
  opacity:0;
}

这里有一个非常轻微的修改：

var app = angular.module("myApp", ['ngAnimate']);

function MainController($scope) {
  $scope.toggle = true;
}

app.controller("MainController", MainController);