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

Question

我想添加2个转换

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

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

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

Answer 1

使用transition不能只对单个元素执行此操作，因为当在转换中放置多个translate时，转换属性总体上是转换的，而不是逐个转换。

使用额外的包装器元素进行纯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>