ngAnimateSwap 限制

Question

我已经使用 ngAnimateSwap 水平、垂直平移元素。但是是否支持其他类型的动画，例如不透明度（淡入和淡出？）

当我修改此处出现的示例 animateSwap 以使用 opacity 而不是 top 值时，动画不会出现。这是预期的吗？

Answer 1

我能够使用 opacity 让它工作。您必须尝试使用 css 并了解 css 元素的作用。 animateSwap 中的 Here's a plunkr 与 opacity 转换一起使用。

原来的css是：

.swap-animation.ng-enter {
  top:-250px;
}
.swap-animation.ng-enter-active {
  top:0px;
}
.swap-animation.ng-leave {
  top:0px;
}
.swap-animation.ng-leave-active {
  top:250px;
}

我将其更改为以下内容，现在交叉淡入淡出效果很好：

.swap-animation.ng-enter {
  top:0px;
  opacity:0;
}
.swap-animation.ng-enter-active {
  top:0px;
  opacity:1;
}
.swap-animation.ng-leave {
  top:0px;
  opacity:1;
}
.swap-animation.ng-leave-active {
  top:0px;
  opacity:0;
}

ngAnimateSwap 限制

ngAnimateSwap limitations

angularjs

opacity

ng-animate