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

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>