Question

我需要一个元素来“跳变”到translateY值而不进行过渡，然后立即动画回到translateY: 0。

>

不幸的是，以下操作不起作用（什么也没有发生，因为我猜想转换太“立即”被删除了）

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

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

$('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 Transitions。只需将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/

“跳转”以转换Y值，然后动画回零

2 个答案: