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容器的宽度不会突然改变宽度大小。 （这样宽度“按扣”更平滑）

有人可以帮忙吗？

Answer 1

我相信你需要动画内容和文本对齐中心。 事实上，这必须解决你的目的。

我添加了span{white-space: nowrap; vertical-align: text-top;} span{white-space: nowrap; vertical-align: text-top;}强制它在单行中对齐，并添加了jQuery animate方法来为旋转文本的宽度设置动画

这是你玩的小提琴

 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> 

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> 

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>