gpt4 book ai didi

angularjs - 当元素最初被隐藏时,Angular 动画在第一次运行时无法正常工作

转载 作者:行者123 更新时间:2023-12-04 14:28:03 26 4
gpt4 key购买 nike

我在我的 angular 应用程序上连接了一个状态栏,目的是当向服务器发出请求时,该栏将显示响应消息,将有一个背景颜色来表示成功或错误,如果成功则隐藏几秒钟。

我看到的是,在加载页面后第一次运行此逻辑时,动画不会运行(淡入和定时淡出都无法运行),但前提是状态栏元素最初是隐藏的,如果我设置在页面加载时将 ng-show 变量设置为 true,所有动画都按预期工作。

我确实通过 chrome 的开发人员工具检查了源代码,在第一次运行期间,div 具有这些类 alert-bar ng-hide-remove ng-hide-remove-active alert-bar-success ng-animate ng-hide在动画应该已经完成​​之后。当动画工作时,唯一存在的类是 alert-bar alert-bar-success ng-animate ng-hide .

HTML:

<div class="alert-bar" ng-show="response.show"  ng-class="(response.result == true) ? 'alert-bar-success' : 'alert-bar-danger'">
<div class="container">
<label>Message: {{response.message}}</label>
</div>
</div>

CSS:
.alert-bar {
width: 100%;
margin-top: -20px;
margin-bottom: 20px;
}

.alert-bar-success {
background-color: #5cb85c;
border-color: #4cae4c;
color: #ffffff;
}

.alert-bar-danger {
color: #ffffff;
background-color: #d9534f;
border-color: #d43f3a;
}

.alert-bar.ng-hide-add, .alert-bar.ng-hide-remove {
-webkit-transition:all linear 0.3s;
-moz-transition:all linear 0.3s;
-o-transition:all linear 0.3s;
transition:all linear 0.3s;
display:block!important;
}

.alert-bar.ng-hide-add.ng-hide-add-active,
.alert-bar.ng-hide-remove {
opacity:0;
}

.alert-bar.ng-hide-add,
.alert-bar.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}

Controller :
controllers.controller("AppController", ['$scope', '$timeout', function($scope, $timeout) {
$scope.response = {};

$scope.response.received = function(message, result) {
$scope.response.message = message;
$scope.response.result = result;
$scope.response.show = true;
if (result == true) {
$timeout(function () {
$scope.response.show = false;
}, 4000);
}
};
}]);

最佳答案

这是由于应用于 ng-class 的动画代码之间的相互作用而发生的。和 ng-hide指令。我做这样的事情的唯一方法是使用单独的 <div>有条件地显示/隐藏但具有静态类的元素。

这是一个 plunkr,它演示了将上述内容一分为二 <div>为问题中的问题创建工作示例的元素:

http://plnkr.co/edit/PFNGkOLKvs8Gx9h1T6Yk?p=preview

或者,您可以放弃使用 ng-hide/ng-show完全和使用 ng-class只。

编辑:见 http://plnkr.co/edit/JiLPc6cqiLHR21c64cCy?p=preview对于使用 ng-class 的版本只。

关于angularjs - 当元素最初被隐藏时,Angular 动画在第一次运行时无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23121945/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com