角 - 动画NG-显示

Question

我已经采用了棱角分明和引导这个简单的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);