角度 - 动画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>

这个小角度控制器：

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

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

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

Answer 1

我让它工作here。

虽然有几个字 - 我将角度版本更改为1.3，因为我使用了ng-animate模块。

基本上只是添加了这个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);