我制作了一个“To-List”，旁边有两个动画图标。右侧的图标不在表格中。因此，当您制作动画时，您可以看到它超越了桌面。我不明白为什么？有什么帮助吗？ 谢谢！
嗨，这是小提琴：
https://jsfiddle.net/rggo2tmv/
如您所见，垃圾箱图标在表格内消失，而另一个图标（在右侧）继续在表格外部。
HTML：
<!DOCTYPE html>
<html>
<head>
<title>To-Do List Project</title>
<!-- local css file sheet-->
<link rel="stylesheet" type="text/css" href="assets\css\todo.css">
<!-- Local JQuery js file-->
<script type ="text/javascript" src="assets/js/lib/jquery-3.1.0.min.js"></script>
<!-- googel fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!-- howel sounds -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script>
<!-- Paper -->
<script type="text/javascript" src="papaer\dist\paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
<!-- two numbers are placing, last number is a radious-->
var circles = [];
var colors = ['blue', 'red', 'orange', 'purple'];
<!-- //DEFINING AN OBJECT -->
var keyData = {
a: {
color: 'purple',
},
b: {
color: 'green',
},
c: {
color: 'yellow',
},
d: {
color: 'orange',
},
e: {
color: 'NavajoWhite',
},
f: {
color: 'yellow',
},
g: {
color: 'orange',
},
h: {
color: 'grey',
},
i: {
color: 'SpringGreen',
},
j: {
color: 'black',
},
k: {
color: 'white',
},
l: {
color: 'darkgrey',
},
m: {
color: 'darkblue',
},
n: {
color: 'darkblue',
},
o: {
color: 'yellow',
},
p: {
color: 'cyan',
},
q: {
color: 'Maroon',
},
r: {
color: 'Red',
},
s: {
color: 'pink',
},
t: {
color: 'Salmon',
},
u: {
color: 'cyan',
},
v: {
color: 'FireBrick',
},
w: {
color: 'Tan',
},
x: {
color: 'Brown',
},
y: {
color: 'Olive',
},
z: {
color: 'YellowGreen',
},
};//closes keyData
function onKeyDown(event) {
if(keyData[event.key]){ //if key is defined
keyData[event.key].color;
<!-- will calc the max size of visible canvas-->
var maxPoint = new Point(view.size.width, view.size.height);
<!-- random is between 0 and 0.99 -->
var randomPoint = Point.random();
<!-- so multiplying max and a random decimal nmber will give us random locaiton inside the canvas -->
var point = maxPoint * randomPoint;
var newCircle = new Path.Circle(point, 200);
newCircle.fillColor = keyData[event.key].color;
<!-- adds the circle to the array -->
circles.push(newCircle);
}//if
};
function onFrame(event) {
<!-- // Each frame, change the fill color of the path slightly by
// adding 1 to its hue: -->
for(var i = 0; i<circles.length; i++){
circles[i].fillColor.hue += 1;
circles[i].scale(.955);
};
};
</script>
</head>
<body>
<div id="container">
<h1>To-Do List <button <i class="fa fa-plus" aria-hidden="true"></i> </button></h1>
<input type="text" placeholder="Add New To-Do">
<!-- span is the button and its inside the li which contains the text -->
<!-- added table to each so they won't all aniamte toghther -->
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
<table>
<tr>
<td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>
<td colspan="2">Hello There</td>
<td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
</tr>
</table>
</div>
<canvas id="myCanvas" resize></canvas>
<!-- Javascript -->
<!-- //icons -->
<script src="https://use.fontawesome.com/9430f1a1cb.js"></script>
<!-- local javascript -->
<script type="text/javascript" src="assets/js/todo.js"></script>
</body>
</html>
使用Javascript：
///// check-off and remove spicific to-do by clicking or restore it to not-done-yet
//will add/remove class "completed" - grey and line-through
$("div").on("click", "span.spanRight", function(){
$(this).parent().parent().toggleClass("completed"); //if class exists will remove and the opposite according to aprent from span.spanRight
});
var sound = new Howl({
src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/clay.mp3']
});
//click on delete button to remove to-do
$("div").on("click", "span.spanLeft", function(){
//will remove the to-do, which its li is the parent element of the span
$(this).parent().parent().fadeOut(500, function() //this here refers to the span, but now because of parent()
//fadeOut will not remove only hide element, so we add remove()
{$(this).remove();}); //this refers to the parent
event.stopPropagation(); //will stop the toggle to "completed" class
});
/////creation of new to-do
//event on key press. When we click "enter" it will add the new to-do (input)
$("input[type='text'").keypress(function(){ //only if input is 'text' it will select the input
if (event.which === 13){//if "enter" is clicked in input field
//grabbing text from input
var todoText = $(this).val(); //takes value that inside input
//create a new li and add to ul
if( todoText!== ''){
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +
"<td colspan='2'>" + todoText + "</td>" +
"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();
}
}
});
/////Add button
// selecting the icon
$(".fa-plus").on("click", function() {
if ( $("input").val() === "") {
// empty
$("input").focus();
} else { //make it do enter key /simulate an enter key, sends the input value and clears the input field (and value)
var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 13;
$("input").trigger(press);
//wil ladd input value to feild
$("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +
"<td colspan='2'>" + $("input").val() + "</td>" +
"<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
"</tr></table>");
$("input").val('');
sound.play();
} //else
$("input").val('');
});
CSS：
canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*layer index*/
z-index: -5;
}
body{
height: 100%;
margin: 0px;
background: linear-gradient(to left, #16BFFD , #CB3066);
}
#container {
width: 360px;
/*to center:*/
margin: 200px auto 200px auto;
/*slight black shadow around*/
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
background: #e6f3ff;
/**/
}
tbody, table {
/*removes bulletpoints*/
padding: 0;
border: none;
margin: 0;
width: 100%;
height: 100%;
/*removes annoying border from table that broswer creates*/
border-collapse:collapse;
background-color: white;
}
tr {
color: #666;
height: 40px;
/*centers the text*/
line-height: 40px;
width: 100%;
}
/*every second li will get this background color IMPORTANT*/
tr:nth-child(2n){
background: #f7f7f7;
}
td {
padding: 0;
margin: 0;
height: 100%;
border: none;
width: 20px;
}
/*mae the delete button appear. animated at span*/
tr:hover span{
/*40px so we'll see the icons which were set to 0 at start*/
width: 40px;
opacity: 1.0;
border: rgb(0, 0, 0, 0,);
}
span {
width: 0%;
padding: 0;
margin: 0;
}
.spanLeft {
background: #e74c3c;
height: 40px;
margin-right: 20px;
margin-left: 0px;
float: left;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 1;
}
.spanRight {
background: blue;
height: 40px;
margin-right:0px;
margin-left: 20px;
float: right;
text-align: center;
color: white;
/*set zero for animation*/
width: 0px;
/* display: inline-block;*/
/*animates*/
transition: 0.5s;
opacity: 0;
}
input {
padding: 13px 13px 13px 20px;
font-size: 16px;
background-color: #f7f7f7;
width: 100%;
/*box sizing includes the padd, margin etc*/
box-sizing: border-box;
/*takes a way the small gaps around input*/
border: 3px solid rgba(0,0,0,0);
}
/*pnly when focued on an input*/
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
.completed {
color: grey;
text-decoration: line-through;
}
/*the plus sign*/
.fa-plus{
background: none;
border: none;
float: right;
}
h1 {
color: white;
text-transform: uppercase;
background: #2980b9;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
/*a google font*/
font-family: 'Roboto', sans-serif;
}
答案 0 :(得分：0)
您设置动画的span元素内的图标，不会像您期望的那样随着范围“缩小”。它显示在0宽度范围的右侧（即它溢出）。您在左侧和右侧都具有相同的效果，如果您更改图标的颜色，则可以看到它。
Span是一个内联元素，因此它通常没有溢出属性，但您可以使用display: inline-block以给定的宽度和高度显示它。挤压span元素的宽度时，使用overflow: hidden隐藏图标。