我现在正在学习 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 开发者窗口中也显得模糊
最佳答案
为了使您的代码成为可能，需要进行大量编辑，但基本上，我在每个框周围添加了一个包装器(以便可以将宽度设置为 0)，然后我将框阴影和边距应用于容器.接下来将宽度设置为 0 > 插入文档 > 将宽度设置为自然(我必须通过将框移到文档外部来进行检查以获得宽度，然后设置为 0 并移回文档中)。
$(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);
}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;
}<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>关于javascript - 移动元素时添加动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30088167/