角方式打开和关闭面板

Question

在Angular中，如果我有几个面板，类似于选项卡，你如何打开面板并使其动画化，如果我点击另一个面板，新的html将被加载，但如果我点击一个打开的面板，它需要动画化。

几乎完全一样http://plnkr.co/edit/?p=preview但是有3个。

我看了ngRouter和UI-Router，我认为UI-Router更接近我需要的，因为你可以删除一个视图

Answer 1

我创建了一个plnkr来显示类似的东西，但是您必须调整CSS过渡。

这是使用ngAnimate和CSS过渡来控制动画。

标记:

<div class="tab-area" ng-switch on="activeTab">
  <div class="tab tab1" ng-switch-when="1">
    <h1>tab 1 content</h1>
  </div>
  <div class="tab tab2" ng-switch-when="2">
    <h1>tab 2 content</h1>
  </div>
</div>
<ul>
  <li ng-click="setTab(1)">tab 1</li>
  <li ng-click="setTab(2)">tab 2</li>
</ul>

JavaScript:

$scope.activeTab = 0;
$scope.setTab = function(tabId){
  $scope.activeTab = $scope.activeTab===tabId ? 0 : tabId;
};

Answer 2

angular-ui绝对是你想要的，你可以看到他们的示例站点几乎是你发布的jQuery示例的完整再现。