Question

我有这个HTML：

<body ng-app="ngAnimate">
<input type="checkbox" ng-model="checked" ng-init="checked=true" />
  <div ng-if="checked" class="animate">
  Show when checked:
  <span>
    This is removed when the checkbox is unchecked.
  </span>
  </div>
</body>

和这个css：

.animate-enter, 
.animate-leave
{ 
    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
} 

.animate-enter {
    left: 100%;
}
.animate-enter.animate-enter-active {
    left: 0;
}

.animate-leave {
    left: 0;
}
.animate-leave.animate-leave-active{
    left: -100%;
}

但是动画不起作用，这里是一个掠夺者：http://plnkr.co/edit/DmTPvBMdh25Bzp8H2yHk?p=preview

有人可以告诉我它为什么不起作用吗？（我也尝试用ng-animate='animate' - 没有工作）

我只想在标签发生变化时创建一些滑动效果，这就是它的简化

Answer 1

您只需要更改css，使其符合ngAnimate标准，如下所示：

.animate.ng-enter, 
.animate.ng-leave
{ 
    -webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: absolute;
} 

.animate.ng-enter {
    left: 100%;
}
.animate.ng-enter.animate.ng-enter-active {
    left: 0;
}

.animate.ng-leave {
    left: 0;
}
.animate.ng-leave.animate.ng-leave-active{
    left: -100%;
}

ngAnimate不适用于幻灯片动画的ngIf

1 个答案:

Working Example