Angular 淡入淡出动画在加载期间发生在错误的时间

Question

我们的 Angular 应用程序中有一个弹出模式，其中包含一个  元素，当单击某个按钮时，该元素应该出现，然后淡出。这一切都按预期工作。但是有一个问题。当模态首次加载时，  会暂时出现，然后淡出。该行为与将 ng-show 设置为 true 的  一致，但随后在加载模式时设置为 false，触发淡出过渡。

这里是 :

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

但是当控制器加载时，变量 $scope.copyLinkClicked 被设置为 false，因此我们预计在加载时甚至不会看到  被渲染。

这里是相关的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 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;
});

Angular 淡入淡出动画在加载期间发生在错误的时间

Angular fade animation happening at wrong time during load

animation

fadeout

fadein

angularjs