CSS：如何在文本更改时使div宽度平滑过渡？

Question

如果有人能更好地表达这个问题，请告诉我，我将进行修改（或您可以自行编辑）。

这是我的当前 jsfiddle：https://jsfiddle.net/5v7mzadu/

我的 HTML：

<div class="text-cycler">
    WE <div class="c-text" id="ctext-1">CARE</div>
       <div class="c-text" id="ctext-2">THINK</div>
       <div class="c-text" id="ctext-3">SEE</div>
       <div class="c-text" id="ctext-1">KNOW</div>
</div>

我的CSS：

.text-cycler {
     text-align:center;
     font-size:25px;
}
.c-text {
    display:inline-block
}

我的javascript代码：

var divs = $('div[id^="ctext-"]').hide(),
           i = 0;

(function cycle() { 

    divs.eq(i).fadeIn(400)
        .delay(1000)
        .fadeOut(400, cycle);

    i = ++i % divs.length;

})();

如您所见第二个单词会渐隐/渐现。我希望为这个 div 添加平滑过渡效果，以便该 div 容器的宽度不会突然改变大小。（这样宽度的“跳跃”更加平滑。）

有人能帮忙吗？

- LatentDenis

---

这是因为您正在使用 text-align:center;。因此，视图将根据文本的长度进行调整。通过使用 text-align:left; 您可以解决这个问题。请检查是否可以。 - Jijo Cleetus

Answer 1

我相信您需要在内容上添加动画并使文本居中对齐。这确实可以解决您的问题。

我已经添加了span {white-space: nowrap; vertical-align: text-top;}，以强制将其对齐成单行，并添加了jQuery animate方法来动画旋转文本的宽度。

这是fiddle供您参考。

var divs = $('div[id^="ctext-"]').hide(),
  i = 0;

(function cycle() {
  divs.eq(i)
    .animate(400, function() {

      $('.x').animate({
        width: $(this).innerWidth()
      });
    })
    .fadeIn(400)
    .delay(1000)
    .fadeOut(400, cycle);
  i = ++i % divs.length;
})();

.text-cycler {
  text-align: center;
  font-size: 25px;
}

span {
  white-space: nowrap;
  vertical-align: text-top;
}

.c-text {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler">
  <span> WE </span>
  <span class="x">
    <div class="c-text" id="ctext-1">CARE</div>
    <div class="c-text" id="ctext-2">THINK</div>
    <div class="c-text" id="ctext-3">SEE</div>
    <div class="c-text" id="ctext-1">KNOW</div>
  </span>
</div>

- Saurabh Sharma

---

这几乎是完美的。不过有一个问题，当它从一个较短的单词切换到一个较长的单词时，如何使整个单词的可见性成为可能。例如，当它从“Care”切换到“Think”时，“nk”字母会被短暂地截断和看不见。有没有办法解决这个问题？ - LatentDenis

是的，您可以通过加快animate方法的速度来修复它，例如 $('.x').animate({width: $(this).innerWidth()},100); 这将解决问题，但也会加快过渡速度。 - Saurabh Sharma

谢谢！非常有用的补充。 - LatentDenis

谢谢！那正是我所需要的。我只有一个问题，在这一行上: .animate(400, function(){ 我不能在这里传递400，因为我收到一个IDE错误 No overload matches this call. 。没有它，文本“WE”不会进行动画处理（在x轴上平移）。你能告诉我应该在这里改变什么吗（我猜测是最新的jQuery版本）？ - whiteBear22

Answer 2

看这段代码

var divs = $('div[id^="ctext-"]').hide(),
    i = 0;

(function cycle() { 

  divs.eq(i).fadeIn(400)
    .delay(1000)
    .fadeOut(400, cycle);

  i = ++i % divs.length;

})();

.text-cycler {
  font-size:25px;
  position:fixed; /*added*/
  padding-left:40% /*added*/
}

.c-text {
  display:inline-block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-cycler" align="center">
WE <div class="c-text" id="ctext-1">CARE</div><div class="c-text" id="ctext-2">THINK</div><div class="c-text" id="ctext-3">SEE</div><div class="c-text" id="ctext-1">KNOW</div>
</div>

- Deep 3015

Answer 3

Javascript 低代码方案。

如果你想要玩点花活。（不开玩笑，这个方案更多是一个花哨的解决方案而非可用性解决方案）

.text-cycler {
  width:75%;
  margin:auto;
  user-select: none;
  text-align:center;
  font-size:5vw;
}
.text-cycler:after {
  content:"";
  display:inline-block;
  animation: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes change {
  0% {
    content: "CARE";
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  25% {
    content: "CARE";
    opacity: 0;
  }
  25.1% {
    content: "THINK";
  }
  28% {
    opacity: 1;
  }
  47% {
    opacity: 1;
  }
  50% {
    content: "THINK";
    opacity: 0;
  }
  50.1% {
    content: "SEE";
  }
  53% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  75% {
    content: "SEE";
    opacity: 0;
  }
  75.1% {
    content: "KNOW";
  }
  78% {
    opacity: 1;
  }
  97% {
    opacity: 1;
  }
  100% {
    content: "KNOW";
    opacity: 0;
  }
}

<div class="text-cycler">
  WE
</div>

- Adam K.

---

为什么？因为我有点疯狂。 - Adam K.