在加载过程中发生错误时间的角度淡出动画

Question

我们在我们的Angular应用程序中有一个弹出窗口模式，其中包含应该出现的<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设置为false时，控制器的负载，因此我们期望从来没见过<span>在加载时被渲染。

下面是相关的CSS：

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

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

此问题已得到this SO question讨论，但没有给出明确的解决办法。我们考虑关闭这个元素的动画，但这也可能有问题。

任何能够在Angular规范使用中完成任务的解决方案将不胜感激。

Answer 1

一个快速的解决方法是将另一个span标记添加为span元素的父元素。然后，您可以将一个ng-if条件添加到父元素，并在if条件中使用最初设置为false的变量。这将确保子页面在页面加载时不会呈现，因此您不会看到动画。然后，您可以在文档就绪事件中将该变量的值设置为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; 
});