jquery - 如何使用 jQuery 的 .css() 触发带有过渡的连续 CSS 变换？

Question

这是我要实现的目标的分割。

1. 使用 CSS 转换转换框的 Y 位置，没有转换。例如翻译 Y - 200px。
2. 使用过渡将框平移回原始位置。例如翻译 Y - 0px。

似乎最后一个翻译取消了第一个翻译。我只是不完全确定如何正确链接它。

请看下面我的尝试:

$(document).ready(function() {
  $( 'body' ).on( 'click', '.box', function() {
    $( this ).css( 'transform', 'translate(0px, 200px)' );
    $( this ).addClass( 'animating' );
    $( this ).css( 'transform', 'translate(0px, 0px)' );
  } );
} );

.box {
  transform: translate(0px,0px);
  width: 50px;
  height: 50px;
  display: block;
  background: #0f0;
}

.box.animating {
  transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
}

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

Answer 1

这应该对你有帮助。使用 show() 在两个动画之间添加一个小的超时

$(document).ready(function() {
  $( 'body' ).on( 'click', '.box', function() {
    $( this ).css( 'transform', 'translate(0px, 200px)' ).show().addClass( 'animating' ).css( 'transform', 'translate(0px, 0px)' );
  } );
} );

.box {
  transform: translate(0px,0px);
  width: 50px;
  height: 50px;
  display: block;
  background: #0f0;
}

.box.animating {
  transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  -moz-transition: all 2s ease-in-out;
  -o-transition: all 2s ease-in-out;
}

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