Question

我想在网站上使用文字循环功能。

它的工作方式如下：

HTML＆amp;的Javascript

<h1 class="intro-title">This is some text 
    <span id="changer">This text changes</span>
</h1>

<script>
var words = ["changes to this", "changes to that", "changes to there"];
var i = 0;
var text = "This text changes";

function _getChangedText() {
    i = (i + 1) % words.length;
    return text.replace(/This text changes/, words[i]);
}

function _changeText() {
    var txt = _getChangedText();
    document.getElementById("changer").innerHTML = txt;
}
setInterval("_changeText()", 1800);
</script>

这很好用，可以很好地循环选项。我想要为此脚本设置动画，因此文本向上旋转并淡入下一个文本选项。我可以添加到此脚本中，还是需要再次编写？

感谢任何帮助。

附上了一个JSfiddle：https://jsfiddle.net/g59phn0b/

Answer 1

为动画创建一个CSS fadeOut类，并在_changeText()期间添加它。然后在动画后删除此类。如果需要，为下一个元素添加fadeIn类。使用setTimeout();与您的CSS进行轮换时间。

<强> CSS

.fadeOut{
  visibility: hidden;
  opacity: 0; 
 -webkit-transition: all 1s ease-out;
       -moz-transition: all 1s ease-out;
        -ms-transition: all 1s ease-out;
         -o-transition: all 1s ease-out;
            transition: all 1s ease-out;
  transform: translate(0,-50px);
  -webkit-transform: translate(0,-50px);
  -o-transform: translate(0,-50px); 
  -moz-transform: translate(0,-50px);
}

<强> JS

function _changeText() {
    var txt = _getChangedText();
    var d = document.getElementById("changer")
    d.className = "fadeOut";
    setTimeout(function(){
        d.className = "";
        d.innerHTML = txt;
    }, 1000);
}

这是经过修改的 JSFiddle fadeOut。只需对fadeIn执行相同操作即可获得所需效果。

Answer 2

它是如何工作的？我收到错误，我需要更改

setInterval("_changeText()", 1800);

到

setInterval(_changeText, 1800);

让它运作

不需要模式匹配或文本变量，只需返回单词[i]

即可

function _getChangedText() {
    i = (i + 1) % words.length;
    return words[i];
}

您可以使用CSS将旋转添加到Hosch Nok的解决方案中，或者使用画布选项。

.fadeOut{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 1s, opacity 1s linear;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

如何用JS动画文本循环

2 个答案: