像这样使用一个.css：

.tab-pane.active:not(.show) {
  opacity: 0;
}
.tab-pane.active{
  opacity:1;
  transition: opacity 2s;
}

然后声明一个新变量

$scope.active_show=0;

现在使用ng-class添加这两个类

<div class="tab-pane" ng-class="{active:  active === $index,
                                 show:  active_show === $index}" 
      ng-repeat="tab in tabs">
        {{tab.content}}
</div>

改变你的功能

$scope.setActive = function(index) {
    $scope.active = index;
    setTimeout(()=>{
        $scope.active_show=index;
      $scope.$apply();
    })
  }

这个想法是你的div，当激活的时候有一个类.active，在一个新的循环中-它是setTimeOut的函数-这个类是.active.show
您的fork jsfiddle
注意：我之所以使用.show/not（.show），是因为它是 Bootstrap 使用的方式
注意2：我想你正在做一个老项目，AngularJs有点老了，很快你就应该尽快换成Angular