Question

我遇到的问题是当我使用ngAnimate动画提供的动画挂钩以及它如何影响其周围的其他元素时非常不稳定。与jQuery的show / hide功能相比，它可以创建非常平滑的过渡。

CSS：

.animate-show-hide.ng-hide {
 opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

正如您所看到的，当您使用ngAnimate隐藏时，元素会淡出，下面的元素会突然弹出。使用jQuery时，下面的元素会平滑过渡，而元素会逐渐消失。

如何使用ngAnimate实现此类平滑过渡效果？

更新：为了澄清，我正在寻找一个通用的解决方案，而不是那个只能用给定的例子。我将应用此动画的元素在大小或样式上有所不同。

Answer 1

只需为所有需要的css属性制作动画，就可以在 demo plnkr 中使用。

.content-area {
  border: 1px solid black;
  margin-top: 10px;
  padding: 10px;
  width:95%;
}

.animate-show-hide {
  transition: all linear 0.5s;
  height:25px; 
  width:95%;
  margin-top:10px;
}
.animate-show-hide.ng-hide {
  opacity: 0;
  margin-top:0;
  height:0;
  width:0%;
  padding:0;
}

动画的一般解决方案：

您始终需要操纵要设置动画的css属性。 jQuery动画很特别。 jQuery查找元素上的所有css绑定并操纵动画所需的那些（例如show / hide将检查所有边框css绑定（填充，边距，高度，宽度等。）＆amp; 不透明度）。 ngAnimate仍然非常简单，因为它完全取决于原始css动画。您可以编写一个指令，使其像jQuery一样工作，但IMO通过平面css实现这一目标会很好。

使用基于CSS的动画的主要优点是性能。所有css动画都是硬件加速的。您应该关注基于css动画的解决方案，而不是通过JavaScript操作css-attribute值。

一个好帮手是animate.css。通过查看这个库，您将看到，动画没有“通用解决方案”，因为所有动画都取决于它们的用途。例如：“摆动”动画不会为“隐藏”设置动画。

Answer 2

如果你想知道 jQuery 是怎么做的，那就设置一个非常高的动画时间，比如 30秒（见附图）和检查元素。您将看到一些属性逐渐变化：

overflow, width, height, padding, margin & opacity.

如果你分析jQuery的工作原理，你会发现它用 javascript 来改变css值。所以jQuery可以知道元素的原始大小因为它使用了javascript。

不幸的是，在 css中你不能通过写高度来动画元素的高度：auto;

但你可以使用一些技巧，比如动画 max-width ， max-height ， padding ， margin 和 font-size （以避免最后一刻跳转）

我和你的plunkr一起尝试了这个并得到了一个非常好的结果：

.sample-show-hide {
  transition: all linear 2s;
  max-width: 100%;
  max-height: 1000px; /* something higher than your element */
  opacity: 1;
  overflow: hidden;
}
.sample-show-hide.ng-hide {
  max-width: 0%;
  max-height: 0px;
  opacity: 0;
  padding: 0;
  margin: 0;
  font-size: 0px;
}

screenshot

使用AngularJS和ngAnimate平滑动画？

2 个答案:

动画的一般解决方案：