我怎样才能添加两个过渡变换，但一个接一个？

Question

我想添加 2 个过渡变换

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

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

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

Answer 1

您不能使用 transition 对单个元素执行此操作，因为当您在转换中放置多个转换时，转换属性整体上会转换，而不是一个接一个。

使用额外包装元素的纯 CSS 过渡：

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

.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 没有任何额外元素：

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

$(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>

我怎样才能添加两个过渡变换，但一个接一个？

How can I add two transition transforms but one after one?

css

css-transitions

css-transforms

css-animations