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

发布时间:2020-01-21 发布网站:大佬教程
大佬教程收集整理的这篇文章主要介绍了angularjs – 当元素最初被隐藏时,角度动画在第一次运行时无法正常工作大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我在我的角度应用程序上连接一个状态栏,目的是当向服务器发出请求时,栏会显示响应消息,将有一个背景颜色来表示成功或错误,以及是否成功隐藏之后几秒钟.

我所看到的是,在加载页面后第一次运行此逻辑时,动画未运行(淡入和定时淡出都无法运行),但仅当状态栏元素最初被隐藏时,如果我设置在页面加载时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;
}

控制者:

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.

编辑:有关仅使用ng-class的版本,请参阅http://plnkr.co/edit/JiLPc6cqiLHR21c64cCy?p=preview.

大佬总结

以上是大佬教程为你收集整理的angularjs – 当元素最初被隐藏时,角度动画在第一次运行时无法正常工作全部内容,希望文章能够帮你解决angularjs – 当元素最初被隐藏时,角度动画在第一次运行时无法正常工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ群:277859234,请注明来意。