CSS 底部过渡不平滑

Question

$(function(){
 
 function boxtoRight(){
  $("#box").animate({marginLeft: 600},3000,'linear',boxtoLeft);
 }
 function boxtoLeft(){
  $("#box").animate({marginLeft: 0},3000,'linear',boxtoRight);
 }
 boxtoRight();


 $(document).keydown(function(e){
  if(e.keyCode == 32){
   $("#box").css("background","green");
   $("#box").css("bottom","200px").css("transition","0.2s");
  }
 });
 $(document).keyup(function(e){ 
  if(e.keyCode == 32){
   $("#box").css("background","red");
   $("#box").css("bottom","130px").css("transition","0.2s");
  }
 });

});

#container{
 background: #ccc;
 width: 600px;
 height: 200px;
}
#box{
 width: 90px;
 height: 90px;
 background: red;
 position: absolute;
 margin-top: 110px;
}

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

问题是我试图在按下空格键时让盒子跳起来。现在如果我按空格键，盒子跳动但动画不流畅。

此外，如何通过动画、滚动将框移动到 window 的中心并转到文档右侧？

Answer 1

这里有几件事。在 CSS 转换属性中，您需要指定转换适用于哪个属性。所以我更新了你的 CSS 以包含 transition: bottom 0.2。我也给了 #container position: relative 所以 #box 的 bottom 属性是相对于 #container.

的底部

#container{
    background: #ccc;
    width: 600px;
    height: 200px;
    position: relative; //added
}    

#box{
    width: 90px;
    height: 90px;
    background: red;
    position: absolute;
    bottom: 0px;  //added
    transition: bottom 0.2s; //added
}

现在在您的 Javascript 中，您不再需要更改 transition 属性。此外，我没有多次调用 .css()，而是更新为在单个 .css() 调用中更改了多个属性。最后，我更改了 bottom 的值，因为它现在相对于 #container.

的底部

$(function(){

    function boxtoRight(){
        $("#box").animate({marginLeft: 510 },3000,'linear',boxtoLeft);
    }
    function boxtoLeft(){
        $("#box").animate({marginLeft: 0},3000,'linear',boxtoRight);
    }
    boxtoRight();


    $(document).keydown(function(e){
        if(e.keyCode == 32){
            $("#box").css({"background":"green",
                           "bottom":"70px"
            });
        }
    });
    $(document).keyup(function(e){ 
        if(e.keyCode == 32){
            $("#box").css({"background":"red",
                           "bottom":"0px"
            });
         }
     });
});

检查这个工作 fiddle：https://jsfiddle.net/s3pfrhn8/2/

CSS 底部过渡不平滑

CSS bottom transition not smooth

jquery

scroll

css-transitions

jquery-animate