时间戳

首页 > 解决方案 > css替换居中句子中的单词并平滑调整宽度

javascript - css替换居中句子中的单词并平滑调整宽度

问题描述

我正在寻找与此页面上的主要效果类似的效果https://sendgrid.com/

页面显示一个居中的句子，一个词被替换，句子左右到词的部分，根据新词的宽度平滑地重新调整位置。

<body>
    <h1>
        This animation is
        <span id="swappable">awesome</span>
        don't you think?
    </h1>
</body>

body {
    display: flex;
    justify-content: center;
}

#swappable {
    display: inline-block;
}

const swappables = ["bad", "great", "fantastic", "boring"];

let index = 0;
setInterval(() => {
    document.getElementById("swappable").innerHTML = swappables[index];
    index = index == swappables.length - 1 ? 0 : index + 1;
}, 3000);

此代码使零件在替换单词后卡入到位，但

我怎样才能实现这种平稳过渡？

标签： javascripthtmlcss

解决方案

document.addEventListener('DOMContentLoaded',()=>{
const stringsCont = document.querySelector('#strings-cont');
const strings = [...stringsCont.querySelectorAll('.string')];
let active = 0;
next = () =>{
strings.forEach((s,i) => i===active?s.classList.add('active'):s.classList.remove('active'));
  stringsCont.style.width = strings[active].offsetWidth+'px';
  active = (active+1)%strings.length;
}
setInterval(next, 3000);
setTimeout(next,0)
});
h1 {
  font-family: sans-serif;
  font-size: 16px;
  text-align: center;
  font-weight: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
#strings-cont{
  position: relative;
  display: inline-flex;
  transition: width .3s ease;
  justify-content: center;
}
.string {
  font-weight: bold;
  transition: opacity .3s ease, top .3s ease;
  position: absolute;
  opacity:0;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.string:before {
  content: '';
  position: absolute;
  top: 100%;
  left:0;
  height: 3px;
  width: 0;
  background-color: violet;
}
.string.active {
  transition: opacity .3s ease;
  opacity:1;
  position: static;
  transform: translateX(0);
  left:0;
  top:0;
}
.string.active:before {
  width: 100%;
  transition: all 2.7s ease;
  transition-delay: .3s;
}
<h1>
Send Email&nbsp;
<span id="strings-cont" style="width:0">
<span class="string">Lorem Ipsum</span>
<span class="string">Dolor Sit Ammet</span>
<span class="string">Consectetur Adipiscing Elit</span>
<span class="string">Sed Do Eiusmod</span>
</span> 
&nbsp;With Confidence
</h1>

推荐阅读