Question

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

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

1 个答案: