内联块元素成为我的代码的块级元素，我该如何修复它？

Question

当我单击“尝试”按钮时，我希望我的 span 标签随时间动态移动。 它运行良好，但是当我单击它时，span 标签开始显示为块元素，它包含整个右侧块级别但左侧。 我只是希望它像初始图形一样显示。 我该如何解决这个问题？

我的代码：

 <html> <head> <script> var j = 0; var i = 0; function myFunction2() { document.getElementById("demo").style.left = j + "px"; document.getElementById("demo").style.top = j + "px"; j++; } function myFunction() { document.getElementById("demo").style.right = "0px"; j = 0; i = 0; while (i <= 250) { setTimeout(myFunction2, (i**2)*0.01); i++; } } </script> </head> <body> <span id="demo" style="position:absolute;left:text-align:center;0px;top:0px;font-size:30px;background-color:powderblue;border:1px solid powderblue;border-radius: 3px;padding: 10px;">Shift</span><br> <button id="submit" type="button" onclick="myFunction();" style="position: absolute; top: 60px; left: 20px;">Try</button> </body> </html>

Answer 1

并非如此， span 实际上从一开始就是inline ，并且您没有将其设置为inline-block 。 这里发生的是你有一个left和right ，所以你告诉它从左值开始并在右值结束。 您必须在那里检查您真正想用 animation 做什么？

Answer 2

这可能是你想看到的：

 let j = 0; let i = 0; const demo = document.querySelector('#demo'); const button = document.querySelector('#btn'); function myFunction2() { document.getElementById("demo").style.left = j + "px"; document.getElementById("demo").style.top = j + "px"; if (++j > 250) { button.disabled = false; } } function myFunction() { button.disabled = true; demo.classList.remove('animate'); j = 0; i = 0; while (i <= 250) { setTimeout(myFunction2, (i**2)*0.01); i++; } } function raf(init = false) { demo.classList.remove('animate'); if (init) { j = i = 0; } requestAnimationFrame(() => { let cnt = 0; const newVal = `${j++}px`; demo.style.left = demo.style.top = newVal; j <= 250 && raf(); }); } function cssAnimate() { demo.style.left = demo.style.top = 0; demo.classList.toggle('animate'); }

 #demo { position: absolute; text-align: center; left: 0px; top: 0px; font-size: 30px; background-color: powderblue; border: 1px solid powderblue; border-radius: 3px; padding: 10px; transform: none; } #demo.animate { transition-delay: 1s; transition: all 1s ease-out; transform: translateX(250px) translateY(250px); }.submit { position: relative; top: 60px; left: 20px; }

 <span id="demo">Shift</span><br> <button class="submit" id="btn" type="button" onclick="myFunction()">Try</button> <button class="submit" type="button" onclick="raf(true)">Try RAF (without easing)</button> <button class="submit" type="button" onclick="cssAnimate()">CSS animate</button>

您的内联样式中有一些拼写错误：

position:absolute;left:text-align:center;0px;

应该：

position: absolute; text-align: center; left: 0px;

然后，在myFunction()中添加right: 0px; 并且在myFunction2()中添加 'left: 0px;' 并在while循环中增加这个左值。 这 2 个 styles 在这两个值（右：0 和变量左）之间拉伸您的内联跨度。 要修复它，只需删除

document.getElementById("demo").style.right = "0px";

来自myFunction()的行。

一些建议：

对 animation 使用requestAnimationFrame (RAF) 而不是setTimeout 。 RAF 在浏览器重新渲染之前执行（大约每秒 60 次），而setTimeout可能每秒执行大约 250 次，大约 75% 的代码不会影响 animation
使用 CSS 文件/节，而不是海量的内联样式，这样更难阅读和测试
使用translate: transformX()而不是position: absolute; ，在浏览器性能方面更便宜（谷歌提供的一些信息）

我只添加了 RAF 和 CSS 示例。

内联块元素成为我的代码的块级元素，我该如何修复它？

问题描述

2 个解决方案

解决方案1
0 2020-06-15 20:42:11

解决方案2
0 2020-06-15 21:00:13

内联块元素成为我的代码的块级元素，我该如何修复它？

问题描述

2 个解决方案

解决方案1 0 2020-06-15 20:42:11

解决方案2 0 2020-06-15 21:00:13

解决方案1
0 2020-06-15 20:42:11

解决方案2
0 2020-06-15 21:00:13