所以我想要更改一个元素的宽度,并将其放置在
我尝试使用
这是代码:
h1
元素内。每4秒使用 setInterval()
更改 h1
的textContent。 我想这样做是为了给宽度属性添加转换,以填充 h1
和下一个单词之间的空白,使过渡变得平滑。我尝试使用
getBoundingClientRect()
获取元素的宽度,但它没有起作用。而当我设置宽度时,它仍然是第一个元素的宽度,并且没有随着所需动态更改。这是代码:
const changingSpan = document.querySelector('.changing-span');
let array = ['best', 'tastiest', 'freshest'];
let count = 0;
setInterval(function() {
count++;
let elementWidth = changingSpan.getBoundingClientRect().width.toString();
if(count === array.length) count = 0;
changingSpan.classList.add('animation-span');
changingSpan.textContent = array[count];
changingSpan.style.width = `${elementWidth}px`;
changingSpan.addEventListener('animationend', function() {
changingSpan.classList.remove('animation-span');
})
}, 4000);
.changing-span {
display: inline-block;
color: #c82929;
transition: width .2s ease;
}
.animation-span {
animation: moveDown .8s ease;
}
@keyframes moveDown {
0% {opacity: 0;
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}
<h1 class="first-heading">The <span class="changing-span">best</span> burgers in town.</h1>
span
元素。内部的span
应该是你测量单词宽度的元素。外部的span
应该是你设置宽度的元素。这样,就不会有来自你试图测量的span
上最后一个单词的硬编码宽度留下来。 - Sean