我们的Angular应用程序中有一个弹出模式,其中包含一个应该出现的 <span>
元素,然后在单击某个按钮时淡出 . 这一切都按预期工作 . 但是有一个问题 . 当模态首次加载时, <span>
会暂时出现,然后淡出 . 该行为与将 ng-show
设置为true的 <span>
一致,但在加载模态时设置为false,从而触发淡出过渡 .
这是 <span>
:
<span id="fileLinkCopied" data-ng-show="copyLinkClicked"
class="text-fade float-right">file copied to clipboard</span>
但是当控制器加载时,变量 $scope.copyLinkClicked
被设置为false,因此我们甚至不会看到 <span>
在加载时被渲染 .
这是相关的CSS:
.text-fade {
transition: all linear 500ms;
opacity: 1;
}
.text-fade.ng-hide {
opacity: 0;
}
这个问题在this SO question中讨论过,但没有给出明确的解决方案 . 我们考虑过关闭这个元素的动画,但这也可能有问题 .
任何能够在Angular的规范使用范围内完成工作的解决方案都将受到高度赞赏 .
1 回答
一个快速的解决方法是添加另一个span标记作为span元素的父级 . 然后,您可以将
ng-if
条件添加到父元素,并在if条件中使用最初设置为false的变量 . 这将确保在页面加载时不渲染子 Span ,因此您将看不到动画 . 然后,您可以在文档就绪事件上将该变量的值设置为true .这是
<span>
:在您的控制器中添加以下内容: