javascript - 使用 Javascript 旋转文本

Question

我想循环浏览一系列单词以创建文本旋转效果。我大部分都按预期工作。有什么方法可以在 p 元素的长度上使用 css 过渡？

当从一个 char.length > 10 的对象遍历到一个 char.length < 5 的对象(例如)时，移动不流畅，我想缓和文字周围的移动而不是突然向后跳(或向前跳，取决于单词的长度)

HTML:

<p><span id="description-rotate"></span> something built on something else.</p>

SASS:

@-webkit-keyframes rotate-text

    0%
        opacity: 0

    30%
        opacity: 1

    50%
        opacity: 1

    70%
        opacity: 1


    100%
        opacity: 0

p
    font-family: 'Helvetica', sans-serif

.rotate-text
   -webkit-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    -moz-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    -o-animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite
    animation: rotate-text 3050ms cubic-bezier(0.645,  0.045, 0.355, 1.000) infinite

Javascript:

var descriptionArray = ['some text', 'some more text', 'some even longer text'];
var descriptionLength = descriptionArray.length;
var description = $('#description-rotate');

function loop(i) {
     description.text(descriptionArray[i%descriptionLength]);
     setTimeout(function() {
        loop(i+1);
        description.addClass('rotate-text');
    }, 3050); // This duration must match the length of the animation
}

loop(0);

我意识到这可能无法很好地解释我的目标，请查看 CodePen 以更好地了解我要创建的内容。

谢谢!

参见:http://codepen.io/anon/pen/JueGx

Answer 1

一个使用 jQuery 的简单例子
是通过将所需的循环/交换 词存储到 data-* 中属性:

$("[data-words]").attr("data-words", function(i, words) {

    var $self = $(this).text(""),
        words = words.split("|"),
        tot   = words.length,
        c     = 0; 

    for(var i=0; i<tot; i++) $self.append($('<span/>',{text:words[i]}));

    var $words = $self.find("span");

    (function loop(){
      $self.animate({ width: $words.eq( c ).width() });
      $words.stop().fadeOut().eq(c).fadeIn().delay(1000).show(0, loop);
      c = ++c % tot;
    }());
    
});

/* DATA-WORDS Loop/swap words in sentence */
[data-words] {
  vertical-align: top;
  position: static;
}
[data-words] > span {
  display: none;
  position: absolute;
  color: #0bf;
}

<p>
  This is <span data-words="some|an interesting|some longer">some</span> text
</p>

<p>
  Say <span data-words="hi|wow">hi</span> to <span data-words="Javascript|Stack Overflow">mom</span>
</p>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

• | -分隔的单词将转换为数组，最后转换为子项 <span>元素
• 这样span元素需要绝对定位在父元素中 span
• jQuery 将启动一个递归循环，计算下一个字宽，并为其设置动画(淡入淡出 + 宽度)