Угловая анимация затухания происходит в неподходящее время во время загрузки

Question

У нас есть всплывающее модальное в нашем угловом приложении, которое содержит, помимо прочего, элемент <span>, который должен появиться, а затем исчезать, когда нажимается определенная кнопка. Все работает так, как ожидалось. Но есть одна проблема. Когда модальные сначала загружаются, на первый взгляд появляется <span>, затем исчезает. Поведение совместимо с <span>, имеющим ng-show, установленным в true, но затем устанавливается значение false во время загрузки модала, вызывая переход на постепенный переход.

Вот <span>:

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

Но varible $scope.copyLinkClicked устанавливается в ложь при загрузке контроллера, и, следовательно, можно было бы ожидать, чтобы никогда даже видели <span>, оказываемые во время загрузки.

Вот соответствующий CSS:

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

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

Эта проблема обсуждалась в this SO question, но не окончательное решение не было дано. Мы задумались об отключении анимации для этого элемента, но это может также иметь проблемы.

Любое решение, которое получает работу в рамках нормативного использования Углового, будет с благодарностью оценено.

Answer 1

Одним из быстрых способов было бы добавить еще один тег span в качестве родителя элемента span. Затем вы можете добавить условие ng-if к родительскому элементу и использовать переменную, которая первоначально была установлена ​​в false в условии if. Это позволит убедиться, что дочерний диапазон не отображается при загрузке страницы, и поэтому вы не увидите анимацию. Затем вы можете установить значение этой переменной в true в событии готовности документа.

Вот <span>:

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

В контроллере добавить следующее:

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