[英]CSS: How to add smooth shift to div width upon text change?
如果有人能比我更好地說出這個問題,請提出建議,我將改變(或編輯自己)。
這是我目前的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容器的寬度不會突然改變寬度大小。 (這樣寬度“按扣”更平滑)
有人可以幫忙嗎?
我相信你需要動畫內容和文本對齊中心。 事實上,這必須解決你的目的。
我添加了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>
請參閱此片段
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>
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.