Question

我想做什么：

我正在并排转换（翻译和旋转）2个元素，这两个元素都包含内容。内容有另一个动画。当父母正在改变时，它会淡入或淡出。

问题：

每当我为内容添加不透明度动画时，第二个（转换）元素将始终在Android设备中呈现在另一个上面。但它在桌面浏览器和iOS设备中正确呈现。这是它应该看起来的image（注意红色块后面的红色块）。

如果删除内容淡入淡出动画，则会在Android设备上正确呈现。

如何修复它，以便它在Android设备中也能正常工作？

注意：内容可以是文本，图片，多个嵌套元素等。我只使用简单的文字来简化问题。

以下是代码的简化：

<div class="container">
  <div class="block block-1">
    <div class="content content-1">Bye</div>
  </div>
  <div class="block block-2">
    <div class="content content-2">Hello</div>
  </div>
</div>


.block {
  @extend %full;
  @extend %animation;
  transform-origin: 50% 50%;

  &.block-1 {
    background-color: purple;
    animation-name: move-out;
  }
  &.block-2 {
    background-color: red;
    animation-name: move-in;
  }
}

.content {
  font-size: 2em;
  color: white;
  text-align: center;
  @extend %animation;

  &.content-1 {
     animation-name: fade;
  }
  &.content-2 {
    animation-name: fade;
    animation-direction: reverse;
  }
}

http://codepen.io/Ostos/pen/YZZzmm/

Answer 1

在尝试解决此问题的几种方法之后，我发现最好的方法是使内容成为旋转父级的兄弟，并在内容上添加旋转动画和淡化动画。 Android设备显然可以处理具有两种动画的元素，但不能处理具有带不透明度动画的子项的变换的父级。

变换元素

1 个答案: