'Jump' 转换 Y 值，然后动画化回 0

Question

我需要一个元素"跳转"到translateY值而不进行转换，然后立即动画化返回translateY: 0。

不幸的是，以下内容不起作用(什么都没发生，因为我想转换"太快"被删除了(

$('div').css('transform', 'translateY(' + height + 'px)');
.addClass('animate-transform')
.removeAttr('style');

以下方法有效，但感觉很粗糙，我想知道是否有更优雅的解决方案。。

$('div').click(function() {

var height = 200; // This is not always 200
$('div').css('transform', 'translateY(' + height + 'px)');

setTimeout(function() {
$('div').addClass('animate-transform')
.removeAttr('style');
}, 0)
setTimeout(function() {
$('div').removeClass('animate-transform');
}, 1000)
})

div {
height: 100px;
background-color: red;
}
.animate-transform {
transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 1

您可以尝试使用CSS动画并依靠animationend事件来移除该类。如果您希望转换值是动态的，也可以使用CSS变量。

$('div').click(function() {
$('div').css('--v', '200px');
$('div').addClass('animate-transform').on('animationend', function() {
$('div').removeClass('animate-transform')
});
})

div.e {
height: 100px;
background-color: red;
display: block;
}
.animate-transform {
animation: change 1s;
}
@keyframes change {
from {
transform: translateY(var(--v));
}
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="e"></div>

Answer 2

您可以使用Jquery的动画API，而不是使用CSS转换。只需将div的位置设置为relative并修改top即可。工作与预期相似。

var height = 150;
$('div').on('click', function(){
$('div').css('top', height).animate({'top': 0},800);
});

div {
height: 100px;
background-color: red;
position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

请参阅JQuery动画：https://api.jquery.com/animate/