我使用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/。
如何在显示/隐藏面板时在面板上添加动画?
答案 0 :(得分: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);