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'])
        ...

我方面使用动画的页面代码是：

<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 */
}

Answer 2

我使用的是错误的css类...正确使用的类是

th> trsize = 10
th> trdata = torch.Tensor(trsize, 3, 32, 32)
th> subdata = trdata[{ {1, 5} }]
th> subdata:size()
  5
  3
 32
 32
[torch.LongStorage of size 4]

我替换了

/* 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

版本1.3.10中的ngAnimate不起作用

2 个答案: