Angular - 让节目动起来

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/。

如何在 shown/hidden 面板上添加动画？

Answer 1

我成功了 here。

不过说几句 - 我将 angular 版本更改为 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);

Angular - 让节目动起来

Angular - animate ng-show

angularjs

angularjs-animation