如何使用 jQuery 的 .css() 触发连续的 CSS 转换？答案

【问题标题】：How do I trigger successive CSS transforms with transitions using jQuery's .css()?如何使用 jQuery 的 .css() 触发连续的 CSS 转换？
【发布时间】：2016-10-06 14:43:04
【问题描述】：

以下是我想要实现的目标的细分。

使用 CSS 变换不转换框的 Y 位置。例如平移 Y - 200 像素。
使用过渡将框平移回原始位置。例如平移 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>

【问题讨论】：

标签： jquery html css css-transitions translate

【解决方案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>

【讨论】：

【解决方案2】：

请在此处找到您的解决方案Click Me

只需更改 css：

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

.box:hover {
   width: 200px;
  height: 200px;
  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;
}

希望对你有帮助。

【讨论】：

【解决方案3】：

您可以在第二个 css 转换上使用 setTimeOut，例如

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

.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>

【讨论】：

【解决方案4】：

$('.box').click(function() {
    $(this).animate({
            bottom: "200px"
             }, 100, function() {
             $(this).addClass( 'animating' );
             $(this).animate({
               top:"0px"
             },2000);
          });
  } );

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

.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.0/jquery.min.js"></script>
<div class="box">Hello</div>

我已经使用 jquery animate 来执行所需的动画

【讨论】：