animate.css 没有为子图像制作动画

Question

我有一个问题，如果我使用 $animate 将 animate.css 无限动画 class 添加到父 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 无关。

animate.css 没有为子图像制作动画

animate.css not animating child images

css

angularjs

animate.css