CSS：如何在文本更改时为 div 宽度添加平滑移动？答案

【问题标题】：CSS: How to add smooth shift to div width upon text change?CSS：如何在文本更改时为 div 宽度添加平滑移动？
【发布时间】：2017-03-07 13:53:25
【问题描述】：

如果有人能比我更好地表达这个问题，请提出建议，我会更改（或编辑自己）。

这是我当前的 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 容器的宽度不会突然改变宽度大小。（让宽度“snap”更平滑）

谁能帮忙？

【问题讨论】：

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

标签： javascript jquery css css-transitions transition

【解决方案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>

【讨论】：

这几乎是完美的。但是，有一个问题，当它从一个较短的单词切换到一个较长的单词时，您如何使整个单词的可见性成为可能。例如，当它从“Care”切换到“Think”时，字母“nk”会短暂地被截断并且看不见。无论如何要解决这个问题？
是的，您可以通过加快像 $('.x').animate({width: $(this).innerWidth()},100); 这样的动画方法来修复它，这将解决问题，但也可以加快过渡速度
谢谢！非常有用的补充。
谢谢！这正是我需要的。我只有一个问题，在这一行：.animate(400, function(){ 我不能在这里通过 400，因为我收到一个 IDE 错误No overload matches this call.。没有这个，文本WE 没有动画（在 x 轴上平移）。你能告诉我这里应该改变什么吗（我猜是最新的 jQuery 版本）？

【解决方案2】：

看到这个sn-p

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>

【讨论】：

【解决方案3】：

JavascriptLess 方式。

如果你想变得时髦。（不认真，这更像是一个时髦的解决方案而不是可用的）

.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>

【讨论】：

为什么？因为我有点疯了。