Angularjs animate 1.4.7 on tabs

Question

I am currently having issues with animating a set of tabs. I have created a Plunker that mirrors my code and it has the same issues. It seems that everything outside of the tab content animates just fine, but when you push each tab, the animation doesn't work. The contents of each tab should fade in. Any point in the right direction would help. Here is the Plunker : http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview

app.js

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
})
.directive('tab', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div role="tabpanel" ng-show="active" ng-transclude  class="smooth_transition"></div>',
        require: '^tabset',
        scope: {
            heading: '@'
        },
        link: function (scope, elem, attr, tabsetCtrl) {
            scope.active = false;
            tabsetCtrl.addTab(scope)
        }
    }
})
.directive('tabset', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'tabset.html',
        bindToController: true,
        controllerAs: 'tabset',
        controller: [ function () {
            var self = this;
            self.tabs = [];
            self.addTab = function addTab(tab) {
                self.tabs.push(tab);

                if (self.tabs.length === 1) {
                    tab.active = true;
                }
            };
            self.select = function (selectedTab) {
                angular.forEach(self.tabs, function (tab) {
                    if (tab.active && tab !== selectedTab) {
                        tab.active = false;
                    }
                });
                selectedTab.active = true;
            };
        }]
    };

});

style.css

.nav-tabs{
}

.tab-body{
    background: #acacac;
}
.nav-tabs .active{
    background:#494949;
}
.nav-tabs>li {
    background: #acacac;
}

.smooth_transition.ng-enter{
    transition:1s linear all;
    -webkit-transition : 1s linear all;
    opacity:0;
}

.smooth_transition.ng-enter.ng-enter-active {
    opacity:1;
}
.smooth_transistion.ng-leave {
    opacity:1;
}
.smooth_transistion.ng-leave.ng-leave-active {
    opacity:1;
}

tabset.html

<div role="tabpanel" class="smooth_transition">
    <ul class="nav nav-tabs" role="tablist" class="smooth_transition">
        <li role="presentation"
            ng-repeat="tab in tabset.tabs" class="smooth_transition">
            <a href=""
               role="tab"
               ng-click="tabset.select(tab)">{{tab.heading}}</a>
        </li>
    </ul>
    <ng-transclude>
    </ng-transclude>
</div>

Answer 1

You're using ng-enter and ng-leave when instead, just like the checkbox example below, you should be using ng-hide. When you change tabs the tab body is shown or hidden, here's a plunkr for you: http://plnkr.co/edit/A2bAxWZYlinu27j5jo0J?p=preview

Code is just changing the css to this:

.smooth_transition.ng-hide{
    opacity:0;
}

.smooth_transition.ng-hide-add, .smooth_transition.ng-hide-remove {
  transition: all linear 0.5s;
   position: absolute;
}

Using position:absolute stops both tabs content from stacking on top of each other during the transition, which I assume is what you want. To keep it smooth you'll want to keep the tab body width constant during transition, but this should solve your main problem.