angularjs - ng-animate:仅在动画延迟后添加到 dom

Question

我正在尝试将 ng-animate 与 ng-repeat(和 ng-show)结合使用，以淡出旧内容并用新的替换它。

我遇到的问题是，在 remove 和 add 动画期间，添加的元素和删除的元素都有 显示: block 。

我想我可以通过在 CSS 中使用 animation-delay 来避免这种情况，但这只是延迟淡入淡出，而不是添加设置 display 的类在元素上。

结果是一个不稳定的过渡。

这是我的动画 CSS(缩减):

.keyframe-fade.ng-enter,
.keyframe-fade.ng-move {
  animation: 0.5s fade-in;
  animation-delay: 1s;
  animation-fill-mode: backwards;
}
.keyframe-fade.ng-leave {
  animation: 0.5s fade-out;
}

但是用this plunkr 更容易演示.

有什么想法吗？

注意:需要明确的是，链接的 plunkr 上所需的行为是彩色方 block 始终占据相同的空间，即它们位于同一行且按钮不会移动。如果可能的话，我想在没有绝对定位 'bodges' 的情况下解决这个问题，因为我使用它的实际页面比给定的演示复杂得多。

Answer 1

我为此找到的解决方案是使用非常少量的 JavaScript 来增强纯 CSS 动画。

问题总结:

• 进入元素使用 ng-enter 类添加到 DOM，同时离开元素被赋予 ng-leave 类。

• 虽然有动画延迟，但进入元素还是占空间

所以这段 javascript 获取元素并在离开动画期间添加 ng-hide，然后将其删除。

.animation('.keyframe-fade', ['$timeout', function ($timeout){
  return {
    enter: function (element, done){

      // Add ng-hide for the duration of the leave animation.
      element.addClass('ng-hide');

      $timeout(function(){
        element.removeClass('ng-hide');
      }, 500)

      done();

    }
  }
}])

持续时间在这里是硬编码的，但我看不出有任何理由不能从元素中获取它。

欢迎提出改进/建议。

这是原始的 plunkr with the change .