Question

我试图在div上使用show动画，

<div class="animate-show title span3" ng-show="status.processing"  ng-bind="status.message" >

        </div>

和css有

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

.animate-show.ng-hide {
line-height:0;
opacity:0;
padding:0 10px;
 }

.animate-show {
line-height:20px;
opacity:1;
padding:10px;
  }

有什么建议为什么这不起作用？我看到我的div显示并隐藏但没有动画运行。

Answer 1

我认为您需要在CSS中添加ng-enter / ng-leave类。此外，在任何动画发生之前定义animate-show上的过渡状态，因此删除ng-hide-add.ng-hide-add-active

之类的内容

尝试：

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

.animate-show.ng-hide
.animate-show.ng-leave {
    line-height:0;
    opacity:0;
    padding:0 10px;
}

.animate-show,
.animage-show.ng-enter,
.animage-show.ng-move {
    line-height:20px;
    opacity:1;
    padding:10px;
}

如果您不想使用ng-show，以下是使用ng-class的示例：http://plnkr.co/edit/FQDRUkSoellXEFMET33z?p=preview

角度动画不起作用

1 个答案: