Question

我的HTML看起来像这样;

  <div class="loadingmsg" ng-show="!isReady()" ng-animate="{show:'animate-show', hide:'animate-hide'}">
    <div class="loadingmsg-txt glyphicon glyphicon-flash">{{msg.loading || 'loading'}}</div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0" aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
      {{msg.loadingPerc}}%
      </div>
    </div>
  </div>

我已经为CSS添加了必要的类;

.animate-show, .animate-hide {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}

.animate-show {
  opacity:0;
}

.animate-show.animate-show-active {
  opacity:1;
}

.animate-hide {
  opacity:1;
}

.animate-hide.animate-hide-active {
    opacity:0;
}

这一切都很简单。

但是，只要!isReady()返回true，我就会希望div淡出。这没有发生，绝对没有过渡。

我做错了什么？

修改新的CSS：

.loadingmsg.ng-hide-add,
.loadingmsg.ng-hide-remove {
    -webkit-transition:all linear 10s;
    -moz-transition:all linear 10s;
    -ms-transition:all linear 10s;
    -o-transition:all linear 10s;
    transition:all linear 10s;
}

.loadingmsg.ng-hide-add {
    opacity: 0;
}

.loadingmsg.ng-hide-remove {
    opacity: 1;
}

HTML：

  <div class="loadingmsg" ng-show="!isReady()">
    <div class="loadingmsg-txt glyphicon glyphicon-flash"></div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0" aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
      {{msg.loadingPerc}}%
      </div>
    </div>
  </div>

但这仍然没有任何区别。

Answer 1

自AngularJS 1.2以来，ng-animate指令已被弃用。

相反，当显示或隐藏元素时，您依赖AngularJS添加的类。

请参阅this关于如何使用AngularJS 1.2以上动画的优秀文章。

您的HTML标记与次要编辑保持一致 - 删除ng-animate指令：

<div class="loadingmsg" ng-show="!isReady()">
    <div class="loadingmsg-txt glyphicon glyphicon-flash">
        {{msg.loading || 'loading'}}
    </div>
    <div class="progress">
        <div class="progress-bar" role="progressbar" 
             aria-valuenow="{{msg.loadingPerc}}" aria-valuemin="0" 
             aria-valuemax="100" style="width: {{msg.loadingPerc}}%;">
            {{msg.loadingPerc}}%
        </div>
    </div>
</div>

然后为各个类定义适当的动画（参见参考资料）

.loadingmsg.ng-hide-add,
.loadingmsg.ng-hide-remove {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -ms-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
}

.loadingmsg.ng-hide-add {
    opacity: 0;
}

.loadingmsg.ng-hide-remove {
    opacity: 1;
}

ngAnimate什么都不做？

1 个答案: