css - 1.3.10 版的 ngAnimate 不起作用

Question

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

这是我的代码:

在我的页面中包含以下脚本(均适用于 1.3.10 版的 angularjs):

<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 中的 css 中定义的类(通过 Chrome 中的开发人员工具)..但没有使用类......

怎么了？

跟随一个简单的 PLUNKER:

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

谢谢

Answer 1

您需要在原始元素类上设置 transition css 而不是在 enter/leave 版本上

这就是 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 */
}