I'm not sure about a way to do it directly with AngularJS but you could set the display to none for both welcome and login and animate the opacity with an directive once they are loaded.
I would do it some way like so. 2 Directives for fading in the content and fading it out when a link is clicked. The directive for fadeouts could simply animate a element with an unique ID or call a service which broadcasts the fadeout
Template:
<div class="tmplWrapper" onLoadFadeIn>
<a href="somewhere/else" fadeOut>
</div>
Directives:
angular
.directive('onLoadFadeIn', ['Fading', function('Fading') {
return function(scope, element, attrs) {
$(element).animate(...);
scope.$on('fading', function() {
$(element).animate(...);
});
}
}])
.directive('fadeOut', function() {
return function(scope, element, attrs) {
element.bind('fadeOut', function(e) {
Fading.fadeOut(e.target);
});
}
});
Service:
angular.factory('Fading', function() {
var news;
news.setActiveUnit = function() {
$rootScope.$broadcast('fadeOut');
};
return news;
})
I just have put together this code quickly so there may be some bugs :)