1.3.10 版的 ngAnimate 不起作用

Question

我正在使用以下说明：ngAnimate Angularjs 但有些东西仍然不起作用。我没有看到任何效果。

这是我的代码：

在我的页面中包含以下脚本（均适用于 angularjs 的 1.3.10 版本）：

<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="/Scripts/Angular/app.js"></script>

我的app.js如下：

(function (angular) { 
    var public_area =
        angular.module("public-area", ['ngResource', 'ngAnimate'])
        ...

我aspect使用动画的页面代码为：

<p ng-show="my_condition" class="scale-animation">...</p>

最后，css 是

.scale-animation.enter, 
.scale-animation.leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position:relative; display:block;
} 

.scale-animation-enter,
.scale-animation-leave.scale-animation-leave-active { 
    -webkit-transform:scaleY(0);
    -moz-transform:scaleY(0);
    -ms-transform:scaleY(0);
    -o-transform: scaleY(0);
    transform:scaleY(0); height:0; opacity:0;
}

.scale-animation-leave,
.scale-animation-enter.scale-animation-enter-active {
    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform: scaleY(1);
    transform:scaleY(1); height:30px; opacity:1;
}

段落正确出现和消失，但没有显示动画... 对我来说奇怪的是，当条件是否被验证时，我在 DOM 中看到类中定义的类（通过 chrome 中的开发人员工具） .. 但不使用类...

怎么了？

下面是一个简单的 PLUNKER：

https://plnkr.co/edit/atK7z5rWzDSEccB2HG0s?p=preview

谢谢

Answer 1

您需要在原始元素 class 而不是 enter/leave 版本

上设置 transition css

这就是 ngAnimate 知道在渲染时是否需要管理元素动画的方式 DOM。

添加规则

.scale-animation{
  transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}

并从以下位置移除过渡：

.scale-animation.enter, 
.scale-animation.leave{
   /* remove transition */
}

Answer 2

我用错了css 类...正确类用的是

/* SCALE */
.scale-animation.ng-enter, 
.scale-animation.ng-leave { 
    -webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position:relative; display:block;
} 

.scale-animation.ng-enter,
.scale-animation.ng-leave.ng-leave-active { 
    -webkit-transform:scaleY(0);
    -moz-transform:scaleY(0);
    -ms-transform:scaleY(0);
    -o-transform: scaleY(0);
    transform:scaleY(0); 

    opacity:0;
}

.scale-animation.ng-leave,
.scale-animation.ng-enter.ng-enter-active {
    -webkit-transform:scaleY(1);
    -moz-transform:scaleY(1);
    -ms-transform:scaleY(1);
    -o-transform: scaleY(1);
    transform:scaleY(1); 

    opacity:1;
}

我替换了

ng-show

和

ng-if

1.3.10 版的 ngAnimate 不起作用

ngAnimate in version 1.3.10 does not work

css

angularjs

ng-animate