用动画翻转文本

Flipping 3 text with animation

本文关键字：文本 翻转 动画      更新时间：2023-09-26

我有一个小小的要求。我有一个div，有三个子div和text。加载后，第一个文本将可见。3秒后，第一个隐藏，第二个可见。又过了3秒，第二个就藏起来了，第三个就出现了。这仍在继续。

目前我没有任何动画在一个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);
  • Girija

如果我没理解错的话。我认为更简单的方法是使用MODULO，我这样写:

elementArr[counter%elementCount]
http://jsfiddle.net/t3N4A/

我认为你只需要尝试make position:absolute;就像我改变不透明度一样，你应该改变它的左/顶位置，改变setInterval函数的频率，使它更平滑，并使它消失在你想要的地方。

相关文章：