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

时间:2016-09-15 10:40:57

标签: angularjs animation fadein fadeout

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

答案 0 :(得分: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;
});