CSS：テキストの変更時にdiv幅に円滑なシフトを追加するにはどうすればよいですか？

Question

誰でもこの質問をできるだけ早く行うことができれば助言してください。 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を：

は、ここに私の現在のjsfiddleです

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

(function cycle() { 

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

    i = ++i % divs.length; 

})(); 

2番目の単語が見えるように、フェードイン/アウトします。 divコンテナの幅が突然幅のサイズを変更しないように、divにスムーズな遷移を追加したいと思います。 （幅「スナップ」がよりスムーズになるように）

誰でも手伝いできますか？

Answer 1

私はあなたがコンテンツとテキストの配置中心部のアニメーションを必要と考えています。 そして、これはあなたの目的を解決しなければなりません。

私は、単一の行に整列することを強制するためにspan{white-space: nowrap; vertical-align: text-top;}を追加した、とjQueryはあなたの周り

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

 
(function cycle() { 
 
    divs.eq(i) 
 
    .animate(400, function(){ 
 
    \t 
 
    \t $('.x').animate({width: $(this).innerWidth()}); 
 
    }) 
 
    \t .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>

をプレイするため

そして、ここではfiddleをだ回転テキストの幅をアニメーション化する方法をアニメーション追加されました

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

がソリューションです参照してください。

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 { 
 
    text-align:left; 
 
    font-size:25px; 
 
} 
 
.c-text, .s-text { 
 
    display: inline-block; 
 
    width: 50%; 
 
    float: left; 
 
} 
 
.s-text { 
 
    text-align: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="text-cycler"> 
 
<div class="s-text" id="stext-1">WE&nbsp;</div> 
 
<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 4

JavascriptLessの道を：あなたはdivで最初の単語をラップし、これは幅の50％をDIV作るだけでなく、次のdivの、これだけでこれらの部品に反対text-alignを設定する必要があります。

あなたがファンキーになりたい場合。 （いいえ真剣に、これは使用可能なよりもファンキーなソリューションではありません）

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