To display a specific element based on a selection in a more dynamic way, consider implementing ngSwitch in AngularJS. This directive allows you to conditionally switch the DOM structure in your template depending on a scope expression. You can see an example here.

HTML

<button ng-repeat="item in items" ng-click="parent.selection = item">{{ item }}</button>
<div class="animate-switch-container" ng-switch on="parent.selection">
  <div class="animate-switch" ng-switch-when="foo">foo</div>
  <div class="animate-switch" ng-switch-when="bar">bar</div>
</div>

Javascript

$scope.items = ['foo', 'bar'];
$scope.parent = {
  selection: $scope.items[0]
}

CSS

.animate-switch-container {
  position:relative;
  height:40px;
  overflow:hidden;
}
.animate-switch {
  padding:10px;

}
.animate-switch.ng-animate {
  transition:opacity 1s ease;

}
.animate-switch.ng-leave.ng-leave-active,
.animate-switch.ng-enter {
  opacity: 0;
}
.animate-switch.ng-leave,
.animate-switch.ng-enter.ng-enter-active {
  opacity: 1;
}

This is not chaining, but it is a working animation directly using Angular's ngAnimate module. You can also find another example of ngSwitch on Angular's website.

To create animations based on Javascript, you can utilize the .animation feature. For instance, you can define functions as values for addClass and removeClass.

app.animation('.fade', [function() {
    return {
        addClass: function(element, className, doneFn) {
        },
        removeClass: function(element, className, doneFn) {
        }
    };
}]);

Angular triggers these functions when a class is added or removed from an element through various methods such as:

• {{ }} interpolation in a template. Example:

  <span class="{{shouldFade ? 'fade' : ''}}">....

• Using ng-class in a template. Example:

  <span ng-class="{fade: shouldFade}">...

• Using the $animate service in a directive. Example:

  $animate.addClass(element, 'fade')

  or

  $animate.removeClass(element, 'fade')

What exactly is className? Is it the class to be applied while fading in/out? The expected class?

In this scenario, the value of className will be fade. Though redundant in this example, if multiple classes are being added in the same cycle, they will be concatenated into this string.

What is the purpose of doneFn? Is it a function that executes once the animation finishes? What should be included in it?

doneFn is a function that you call after your defined Javascript animation completes. For a simple animation that does nothing:

addClass: function(element, className, doneFn) {
  doneFn();
},

Calling doneFn signals Angular that the animation has finished, leading to the removal of the ng-animate class.

If doneFn is already present, what tasks should be performed within the addClass and removeClass functions?

You need to include code in them, possibly involving timeouts or external libraries, to modify the element. Upon completion, call doneFn. For instance, a simple opacity animation:

addClass: function(element, className, doneFn) {
  element.css('opacity', 0.5);
  setTimeout(function() {
    doneFn();
  }, 1000);
},

I want to produce a functional animation directly using Angular's ngAnimate module, with CSS or JS. How can I do this?

This question diverges from the previous answers! Realistically, positioning elements absolutely might be the simplest solution for smooth animations. However, if chaining animations through ngAnimate is desired, one approach involves utilizing promises returned by $animate.addClass and $animate.removeClass. This process requires coordinating elements visibility and transitions centrally, as demonstrated below.

To achieve this chain of animations through ngAnimate, consider implementing two custom directives - ngShowUnique and ngShowUniqueController, which only display a single element at a time and manage the associated animations.

The implementation details can be found in the provided code snippet.

Explore the working example at http://plnkr.co/edit/1eJUou4UaH6bnAN0nJn7?p=preview. It may seem complex, but it offers control over element visibility and animations.

While using ngRepeat to display only one element at a time may seem inefficient, I believe it serves its purpose by focusing on one element at a time. You have the option to utilize the parent.activeChild property directly...

Check out the following:

Note: This snippet was created in just ten minutes and may not be optimized or bug-free...feel free to use it as a starting point :)

(function(window, angular, APP) {
  APP
    .value('menuObject', {
      name: 'Main Navigation',
      current: null,
      children: [{
        label: 'Don\'t ng-show element until ng-hide CSS transition is complete?',
        url: 'http://stackoverflow.com/questions/33336249/dont-ng-show-element-until-ng-hide-css-transition-is-complete',
        isCurrent: false
      },
      {
        label: 'Hitmands - Linkedin',
        url: 'http://it.linkedin.com/in/giuseppemandato',
        isCurrent: false
      },
      {
        label: 'Hitmands - Github',
        url: 'https://github.com/hitmands',
        isCurrent: false
      },
      {
        label: 'Hitmands - StackOverflow',
        url: 'http://stackoverflow.com/users/4099454/hitmands',
        isCurrent: false
      }
  ]})
  .directive('menu', function(menuObject, $q) {
    function menuCtrl($scope, $element) {
      $scope.parent = menuObject;
      
      this.getCurrentChild = function() {
        return $scope.parent.current;
      };
      this.getDomContext = function() {
        return $element;
      };
      this.setCurrentChild = function(child) {
        return $q.when($scope.parent)
        .then(function(parent) {
          parent.current = child;
          return parent;
        })
        .then(function(parent) {
          return parent.children.forEach(function(item) {
            item.isCurrent = child && (item.label === child.label);
          });
        })
      };
    }
    
    return {
      restrict: 'A',
      templateUrl: 'embedded-menutemplate',
      scope: {},
      controller: menuCtrl
    };
  })
  .directive('menuItem', function($animate, $q, $timeout) {
    
    function menuItemPostLink(iScope, iElement, iAttributes, menuCtrl) {
      iElement.bind('click', setCurrentTitle);
      iScope.$on('$destroy', function() {
        iElement.unbind('click', setCurrentTitle);
      })
      
      function setCurrentTitle(event) {
        event.preventDefault();
        var title;
        
        return $q
        .when(menuCtrl.getDomContext())
        .then(function(_menuElement) {
          title = angular.element(
            _menuElement[0].querySelector('#menuItemCurrent')
          );
        })
        .then(function() {
          return title.addClass('fade-out');
        })
        .then(function() {
          return $timeout(menuCtrl.setCurrentChild, 700, true, iScope.child);
        })
        .then(function() {
          return title.removeClass('fade-out');
        })
      }
    }

    return {
      require: '^menu',
      link: menuItemPostLink,
      restrict: 'A'
    };
  })
;

})(window, window.angular, window.angular.module('AngularAnimationExample', ['ngAnimate']));

nav {
text-align: center;
}
.link {
display: inline-block;
background-color: lightseagreen;
color: black;
padding: 5px 15px;
margin: 1em;
}
#menuItemCurrent {
padding: 1em;
text-transform: uppercase;
border: 1px solid black;
}
#menuItemCurrent span {
transition: 500ms opacity linear;
opacity: 1;
}
#menuItemCurrent.fade-out span {
opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>

<article ng-app="AngularAnimationExample">
  
  <nav menu></nav>

  <script id="embedded-menutemplate" type="text/ng-template">

<nav >
<a menu-item class="link" ng-repeat="child in parent.children track by $index" ng-bind="child.label"  ng-href="{{ child.url }}"></a>

<h1 id="menuItemCurrent"><span  ng-bind="parent.current.url || 'NoMenuCurrentSelected'"></span></h1>
{{ parent.current || json }}
</nav>

  </script>
</article>

The issue at hand involves the block-level element H1 being positioned within its parent without any overlapping allowed. As a result, one animation disappearing causes it to push down the appearing animation.

A clearer demonstration of this problem can be seen here.

To resolve this issue, the recommendation is to maintain the block-level nature of element H1 but set its position to relative so it retains its place in the page flow. Then, adjust the child SPAN elements to have absolute positioning relative to their parent H1, allowing for proper overlap between them.

CSS

.fade {
  opacity: 1;
  position: relative;
}

.fade.ng-hide-add {
    transition:opacity 1s ease;
    position: absolute;
}

.fade.ng-hide-remove {
    transition:opacity 1s ease 1s;
    position: absolute;
}

.fade.ng-hide-add {
  opacity:1;
}

.fade.ng-hide-add.ng-hide-add-active {
  opacity:0;
}

.fade.ng-hide-remove {
    opacity:0;
}

.fade.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

HTML

  <body ng-controller="MainCtrl">
    <h1><span class="fade" ng-repeat="child in parent.children" ng-show="parent.activeChild == child ">@{{child.title}}</span></h1>
    <button ng-repeat="child in parent.children" ng-click="parent.activeChild = child">{{ child.title }}</button>
  </body>

However, a potential downside arises due to the SPAN elements having absolute positioning, causing them to be removed from the flow during animation and preventing the parent H1 from resizing accordingly. This leads to unexpected jumps in the layout.

To address this issue, a workaround involves adding an empty space after the SPAN repeater. This way, even when the ngRepeated SPANS are taken out of the normal flow due to absolute positioning, the empty space outside the ngRepeat maintains the spacing of the H1.

You can view a functioning example on Plunker.

Consider exploring the transitionend event, which is compatible with all contemporary web browsers.

element.addEventListener('transitionend', callback, false);

Here's a quick solution - Whenever I've encountered this issue before, I've found success by positioning the content absolutely. This ensures that during the transition, the content remains in its original position.

Unfortunately, there isn't another workaround for this because if the content is set to inline or inline-block, it still takes up space in the DOM. This is why you may notice a jump until the transition is complete.