Angular fade animation happening at wrong time during load

Question

We have a popup modal in our Angular application which contains, among other things, a <span> element which should appear, and then fade, when a certain button is clicked. This all works as expected. But there is one problem. When the modal first loads, the <span> momentarily appears, then fades out. The behavior is consistent with the <span> having ng-show set to true, but then set to false at the time the modal is loaded, triggering the fade out transition.

Here is the <span>:

<span id="fileLinkCopied" data-ng-show="copyLinkClicked"
      class="text-fade float-right">file copied to clipboard</span>

But the varible $scope.copyLinkClicked is set to false when the controller loads, and hence we would expect to never even seen the <span> being rendered at load time.

Here is the relevant CSS:

.text-fade {
    transition: all linear 500ms;
    opacity: 1;
}

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

This problem was discussed in this SO question, but no definitive solution was given. We have pondered turning off the animation for this element, but this may have problems as well.

Any solution which gets the job done within normative usage of Angular would be greatly appreciated.

Answer 1

One quick workaround would be to add another span tag as the parent of your span element. You can then add an ng-if condition to the parent element and use a variable that is set to false initially in the if condition. This would make sure that the child span is not rendered when the page loads and therefore you wouldn't see the animation. You can then set the value of that variable to true on document ready event.

Here is the <span>:

<span ng-if="firstLoad "><span id="fileLinkCopied" data-ng-show="copyLinkClicked"
      class="text-fade float-right">file copied to clipboard</span><span>

In your controller add the following:

$scope.firstLoad = false; 
angular.element(document).ready(function () {
    $scope.firstLoad = true;
});