在加载期间错误的时间发生角度淡入淡出动画-Java 学习之路

我们的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的规范使用范围内完成工作的解决方案都将受到高度赞赏 .

1 回答

1
一个快速的解决方法是添加另一个span标记作为span元素的父级 . 然后，您可以将 ng-if 条件添加到父元素，并在if条件中使用最初设置为false的变量 . 这将确保在页面加载时不渲染子 Span ，因此您将看不到动画 . 然后，您可以在文档就绪事件上将该变量的值设置为true .

这是  ：
```
file copied to clipboard
```
在您的控制器中添加以下内容：
```
$scope.firstLoad = false; 
angular.element(document).ready(function () {
 $scope.firstLoad = true;
});
```
回复于 2024-04-18T12:48:35+08:00

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

1 回答

相关问题