如何添加两个过渡变换，但要一个接一个地添加？

Question

我想添加 2 个过渡变换

但我想在第一次转换结束后开始第二次转换

元素应该缓慢地到达一个点，然后它应该到达另一个点

transform: translate(0%, 300%), translate(15%, -136%);

Answer 1

您不能仅使用单个元素来执行此操作transition，因为当您在变换中放置多个翻译时，整个变换属性都会发生转换，而不是一个接一个地发生转换。

使用额外的包装元素进行纯 CSS 转换：

如果您在实际元素周围添加一个额外的包装元素，并将其中一个变换放在包装元素上，您就可以实现您正在寻找的效果。它还会对悬停产生完全相反的效果（将主体悬停并在下面的代码片段中悬停）。

.wrapper {
  position: relative;
  height: 100px;
  width: 100px;
  transition: all 1s 1s;
}
.content {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 1px solid;
  transition: all 1s;
}
body:hover .content {
  transform: translate(15%, -136%);
  transition: all 1s 1s;
}
body:hover > .wrapper {
  transform: translate(0%, 300%);
  transition: all 1s;
}
body {
  min-height: 100vh;
}

<div class='wrapper'>
  <div class='content'>Some text</div>
</div>

使用一些 JS/jQuery 进行过渡，无需任何额外元素：

如果您在实际元素周围添加一个额外的包装元素，并将其中一个变换放在包装元素上，您就可以实现您正在寻找的效果。它还会对悬停产生完全相反的效果（将主体悬停并在下面的代码片段中悬停）。

$(document).ready(function() {
  var isHover; /* variable to track state */
  $('body').hover(function() {
    isHover = !isHover; /* invert the state */
    $('.content').css('transform', 'translate(0%, 300%)');
  }, function() {
    isHover = !isHover; /* invert the state */
    $('.content').css('transform', 'translate(0%, 300%)');
  });
  $('.content').on('transitionend', function() {
    if (isHover) {
      $('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)');
    } else {
      $('.content').css('transform', 'none');
    }
  });
});

.content {
  height: 100px;
  width: 100px;
  border: 1px solid;
  transition: all 1s;
}
body {
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>

有动画且没有额外元素：

使用动画，这可以使用单个元素来完成，但相反的效果很难实现。我们必须为此编写额外的代码，即使如此，它也会很复杂。

.content {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid;
}
body:hover > .content {
  animation: move 1s forwards;
}
@keyframes move {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 300%) translate(15%, -136%);
  }
}
body {
  min-height: 100vh;
}

<div class='content'>Some text</div>

具有反向效果的动画：

下面是一个片段，它也使用 CSS 动画产生相反的效果。但正如您所看到的，它有点复杂。我们也可以使用单个动画来做到这一点，但它会变得更加复杂。

$(document).ready(function() {
  $('body').hover(function() {
    $('.content').css('transform', 'none');
    $('.content').removeClass('hover-out').addClass('hover-in');
  }, function() {
    $('.content').css('transform', 'translate(0%, 300%) translate(15%, -136%)'); /* as soon as an animation is removed, the element would snap back to original state, to avoid that we have to add final state via inline style */
    $('.content').removeClass('hover-in').addClass('hover-out');
  });
});

.content {
  height: 100px;
  width: 100px;
  border: 1px solid;
}
.hover-in {
  animation: hover-in 1s forwards;
}
.hover-out {
  animation: hover-out 1s forwards;
}
@keyframes hover-in {
  0% {
    transform: none;
  }
  50% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 300%) translate(15%, -136%);
  }
}
@keyframes hover-out {
  0% {
    transform: translate(0%, 300%) translate(15%, -136%);
  }
  50% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: none;
  }
}
body {
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='content'>Some text</div>