Question

我正在学习Javascript和jQuery，我遇到了以下问题：我有一个脚本，可以在屏幕上添加方框，它们始终位于中心位置。假设我添加了一个盒子，它在中心水平对齐。现在当我添加另一个盒子时，第一个盒子会自动向左移动一点，这样它们都会在中心对齐。在我的情况下，向左移动是瞬间的。如何为其添加动画？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sort.css">
<script src="jquery.js"></script>
<script src="brain.js"></script>

<Title>Sorting</Title>

</head>
<body>


<input type="button" id="done" value="Done"></input>
<input type="text" id="entry"></input>


<div id="array">
<!-- Items are added here! -->
</div>

</body>
</html>

使用Javascript：

$(document).ready(function(){


    //Done button clicked
    $("#done").on('click', function(){
        //Action code goes here!
        getNumbers();

        //Hide all the numbers 
        $(".boxed:not(.onScreen)").css({
            display : 'none'
        });
        $('.boxed').fadeIn(1000).addClass("onScreen");


    });


    $("#entry").on("keyup", function(){

        if(event.keyCode == 13){
            $("#done").click();
        }

    });



});

//For every Number in the array wil create a box with two classes: "onScreen and boxed"
function addElement(numbers){
    console.log("addElement " + numbers);

    for(var i = 0; i<numbers.length; i++){

        if (isNumber(numbers[i])){
            console.log("Creating element " + numbers[i]);
            var para = document.createElement("div");
            para.className = "boxed";
            var node = document.createTextNode(numbers[i]);
            para.appendChild(node);
            var element = document.getElementById("array");
            element.appendChild(para);



        }
    }

}

//Will get the numbers from the input. 
//Will pass an array of elements to addElement
function getNumbers(){
    console.log("getNumbers");
    var elements = document.getElementById("entry").value;
    document.getElementById("entry").value = "";
    var numbers = elements.split(",");
    console.log(numbers);
    addElement(numbers);

}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

CSS：

body{
    background-color: #DDE9E9;
}

.boxed{
    margin-right: 5px;
    margin-left: 5px;
    margin-top: 10px;

    border: 0px solid #232525;
    border-radius: 15px;

    width: 20px;
    height: 20px;
    padding: 25px;

    text-align: center;

    background-color: grey;
    color: white;
    box-shadow: 2px 2px 20px #888888;


    display: inline-block;
}

.onScreen{



}


#array{

    text-align: center;

}

向数组添加转换不起作用。出于某种原因，它在Chrome开发者窗口中也显得模糊

Answer 1

为了使你的代码能够进行一些编辑，但基本上，我已经在每个框周围添加了一个包装器（这样宽度可以设置为0），然后我应用了box-shadow和margin来容器。接下来将宽度设置为0>插入文档＆gt;将宽度设置为自然（我必须通过移动文档外部的框来进行检查以获得宽度然后设置为0并移回文档中。）

＆＃13;

$(document).ready(function() {
  //Done button clicked
  $("#done").on('click', function() {
    //Action code goes here!
    getNumbers();
  });
  $("#entry").on("keyup", function() {
    if (event.keyCode == 13) {
      $("#done").click();
    }
  });
});
//For every Number in the array wil create a box with two classes: "onScreen and boxed"
function addElement(numbers) {
    console.log("addElement " + numbers);
    for (var i = 0; i < numbers.length; i++) {
      if (isNumber(numbers[i])) {
        console.log("Creating element " + numbers[i]);
        var wrap = document.createElement("div");
        wrap.className = "boxed";
        var para = document.createElement("div");
        para.className = "boxed-inner";
        var node = document.createTextNode(numbers[i]);
        para.appendChild(node);
        wrap.appendChild(para);
        wrap.style.visibility = 'hidden';
        wrap.style.left = '-100%';
        var element = document.getElementById("array");
        element.appendChild(wrap);
        var width = window.getComputedStyle(wrap, null).width;
        wrap.style.width = '0px';
        wrap.style.left = '0px';
        wrap.style.visibility = 'initial';
        wrap.style.opacity = '0';
        $(wrap).animate({
          'opacity': '1',
          'width': width
        });
      }
    }
  }
  //Will get the numbers from the input. 
  //Will pass an array of elements to addElement

function getNumbers() {
  console.log("getNumbers");
  var elements = document.getElementById("entry").value;
  document.getElementById("entry").value = "";
  var numbers = elements.split(",");
  console.log(numbers);
  addElement(numbers);

}

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

＆＃13;

body {
  background-color: #DDE9E9;
}
.boxed {
  display: inline-block;
  overflow: hidden;
  position: relative;
  border-radius: 15px;
  box-shadow: 2px 2px 20px #888888;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 10px;
}
.boxed-inner {
  border: 0px solid #232525;
  border-radius: 15px;
  width: 20px;
  height: 20px;
  padding: 25px;
  text-align: center;
  background-color: grey;
  color: white;
  box-shadow: 2px 2px 20px #888888;
  display: inline-block;
}
#array {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!-- for demo only -->
<input type="button" id="done" value="Done">
<input type="text" id="entry">
<div id="array">
  <!-- Items are added here! -->
</div>

＆＃13;

Answer 2

您需要转换添加的框的宽度。启动新添加的宽度为0的框并将其设置为动画/过渡为全宽。

Answer 3

要建立在humble.rumble.6x3的答案之上，您可以添加转换值，添加选择器，计时和缓动。然后，您可以使用javascript设置任何值并为其设置动画。请注意，CSS3动画仅支持较新的浏览器。

移动元素时添加动画

3 个答案: