animate.css 不为子图像设置动画

Question

我有一个问题，如果我使用 $animate 将 animate.css 无限动画类添加到父 div，这里：

<div class="image-wrapper" ng-style="containerStyles">
  <div class="image-helper">
    <img ng-style="imageStyles" ng-src="{{content}}" />
  </div>
</div>

.image-wrapper div 将设置动画，但它包含的图像将保持原位，直到我单击浏览器或更改检查器中的任何 CSS 值。然后图像捕捉到它应该设置动画的位置并继续设置动画。

以下是还添加的 CSS 样式：

.image-wrapper {
  position: absolute;
  overflow: hidden;
  display: inline-block;
  .image-helper {
    position: relative;
    height: 100%;
    margin: auto;
    img {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
  }
}

如果我使用事件而不是 $animate，也会发生这种情况。

有没有人经历过类似的事情？有人知道解决方法吗？

Answer 1

将transform-style: preserve-3d; 应用于父元素可解决此问题。它与 $animate 无关。