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无关。

animate.css没有动画子图像

1 个答案: