为翻译的元素扩展第一个动画的最终状态

 

我知道这里多次提出这个问题，但我要求为这些动画提供不同的方法。

问题：

第二个盒子有多个动画，试图创造与第一个相同的效果。 看起来像transform属性被覆盖（因为它应该）*。 我试图用第二个动画的属性扩展第一个动画（第二个盒子）。 试图使用animation-fill-mode: forwards但没有成功。 也许我错过了一些基本的东西。 用香草CSS可以吗？

* 参考

'animation-name'属性定义了一个适用的动画列表。 如果多个动画尝试修改相同的属性，则最接近名称列表末尾的动画将获胜。

需求：

单独的move2-right和move2-down关键帧规则，但在同一个元素上工作，保留第一个动画转换。 如果有这种动画的替代方法，请指导我完成。

电流输出： 

.animation-1,
.animation-2 {
  width: 200px;
  height: 200px;
  display: inline-block;
  background: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.movable-1,
.movable-2 {
  background: #41A186;
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
.movable-1 {
  -webkit-animation-name: move1;
  animation-name: move1;
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.movable-2 {
  -webkit-animation-name: move2-right, move2-down;
  animation-name: move2-right, move2-down;
  -webkit-animation-duration: 2s, 2s;
  animation-duration: 2s, 2s;
  -webkit-animation-delay: 4s, 6s;
  animation-delay: 4s, 6s;
  -webkit-animation-fill-mode: forwards, forwards;
  animation-fill-mode: forwards, forwards;
}
@-webkit-keyframes move1 {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(30px) translateY(50px);
    transform: translateX(30px) translateY(50px);
  }
}
@keyframes move1 {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(30px) translateY(50px);
    transform: translateX(30px) translateY(50px);
  }
}
@-webkit-keyframes move2-right {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes move2-right {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@-webkit-keyframes move2-down {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
}
@keyframes move2-down {
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  50% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
}
<div class="animation-1">
  <div class="movable-1">1</div>
</div>
<div class="animation-2">
  <div class="movable-2">2</div>
</div>

据我所知，这是不可能的纯CSS，因为（如你已经指出），当我们添加一个额外的转换规则到一个已经有一个转换的元素，整个转换被重置，因为它覆盖并不会追加到现有的转换。

有了JS，这可能有可能实现，但即便如此，它仍然会很艰难，因为我们必须执行以下操作：

  • 在完成第一个动画时处理animationend结束事件。
  • 在处理程序中，以像素为单位获取translateX(...) 。
  • 获取下一个动画的CSS关键帧规则，修改它们以将translateX(...)作为变换堆栈的第一部分。

    • 注意：我假设你有一个情况，绝对没有办法让你使用问题中提到的第一种方法。

    实现类似效果的另一种方法是对元素的margin或position进行动画处理，而不是使用transform: translate() 。 这种方法的一个主要缺点是，这不会在GPU层完成（不像transform ），因此当多个这样的动画同时发生（并且可能是昂贵的）时会更慢。

    使用边距：

    下面的代码片段通过动画margin-left margin-top和margin-top属性来实现效果。 

    .animation-1,
.animation-2,
.animation-3 {
  width: 200px;
  height: 200px;
  display: inline-block;
  background: white;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  vertical-align: middle;
}
.movable-1,
.movable-2,
.movable-3 {
  background: #41A186;
  width: 50px;
  height: 50px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}
.movable-1 {
  animation-name: move1;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.movable-2 {
  animation-name: move2-right, move2-down;
  animation-duration: 2s, 2s;
  animation-delay: 4s, 6s;
  animation-fill-mode: forwards, forwards;
  animation-timing-function: linear;
}
.movable-3 {
  animation-name: move3-diagonal;
  animation-duration: 4s;
  animation-delay: 8s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}
@keyframes move1 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(30px);
  }
  100% {
    transform: translateX(30px) translateY(50px);
  }
}
@keyframes move2-right {
  0% {
    margin-left: 0px;
  }
  100% {
    margin-left: 30px;
  }
}
@keyframes move2-down {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 50px;
  }
}
@keyframes move3-diagonal
 {
  0% {
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    margin-top: 50px;
    margin-left: 30px;
  }
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="animation-1">
  <div class="movable-1">1</div>
</div>
<div class="animation-2">
  <div class="movable-2">2</div>
</div>
<div class="animation-3">
  <div class="movable-3">3</div>
</div>
    链接地址: http://www.djcxy.com/p/87571.html

    上一篇: Extend the final state of the first animation for translated element

    下一篇: How does Relay / GraphQL 'resolve' works?