翻转三个带动画的文本

Question

我有一个小需求。我有一个带有三个子div文本的div。在加载时，第一个文本将可见。3秒后，第一个文本会隐藏，第二个文本会变为可见状态。再过3秒，第二个文本也会隐藏，第三个文本会变为可见状态。这个过程一直持续下去。

目前，我没有对一个span的隐藏和另一个span的显示进行任何动画处理。所以它看起来有点模糊。我想要的是像Windows 8平铺一样展示某种动画效果。隐藏的文本应该向上滑动并消失，而要显示的文本应该从底部滑入。动画应该给用户带来流畅的体验。

我没有使用任何动画库。这是否可能通过javascript / css实现？以下是我的代码。任何想法都将非常有用。

HTML:

<div class="dataflipping">
          <div class="first">FIRST TEXT</div>
          <div class="second">SECOND TEXT</div>
          <div class="third">THIRD TEXT</div>
</div>

JavaScript:

var srcElement = document.getElementsByClassName("dataflipping");

var elementChld = srcElement.getElementsByTagName("div");
var elementArr = [];

for (counter === 0; counter < elementChld.length; counter++) {
    elementArr.push(elementChld[counter]);
}

var elementCount = elementArray.length;


// Set all except first one to hidden initially
for (counter = 1; counter < elementCount; counter++) {
    var ele = elementArray[counter];
    ele.style.display = "none";
}

counter = 0;


setInterval(function () {
    counter++;
    var prevElement = null;
    var curElement = null;

    if (counter === 1) {
        var prevElement = elementArr[elementCount - 1];
    }
    else {
        prevElement = elementArr[counter - 2];
    }

    curElement = elementArr[counter - 1];
    prevElement.style.display = "none";
    curElement.style.display = "block";


    if (counter === elementCount) {
        counter = 0;
    }
}, 3000);

• 吉里亚

- Shankar

---

你不使用类似jQuery这样的东西有什么原因吗？它非常适合，非常容易使用，而且jQuery就是JavaScript... - Pevara

Answer 1

如果我理解得正确，我认为更简单的方法是使用MODULO，我写了类似这样的代码：

elementArr[counter%elementCount]

http://jsfiddle.net/t3N4A/

我认为你只需要尝试使用position:absolute;，就像我改变不透明度一样，你应该改变它的左/上位置，改变setInterval函数的频率使其更平滑，并使其在你想要的地方消失。希望这能有所帮助。

- kajojeq

---

谢谢您的建议，但我需要幻灯片动画而不是透明度动画。要隐藏的文本应该向上滑动，下一个文本应该从下面出现（或者至少看起来像这样）。 - Shankar