Question

我正在尝试创建一个动画效果，其中一组项目在框中不断变化。我正在尝试显示不同的词（例如城市名称：德里，纽约，伊斯坦布尔等）

在此更改期间，当前元素必须向顶部消失，而新元素将从底部进入以取代其位置。我正在考虑为此使用css动画。

我以前从未使用过CSS动画，也不确定如何执行这一周期的老元素消失/新元素出现动画。如果第一个元素消失了，如何在第一个动画之后继续下一个项目。解决这个问题的正确方法是什么？更好的是，如果<span>在引入新项目时调整了动画大小，并且如果不合适，但该部分现在对我来说是次要的。

function startAnimation() {
  document.getElementById("currentItem").style.animation = "disappearAnimation 0.5s linear 1";
}

 #itemChanger{
     display: inline-block;
     height:90px;
}
.a{
  text-decoration: none;
}
@keyframes disappearAnimation{
  0%{
  opacity: 1;
  bottom: 50px;
  }
  50%{
     opacity: 0.5;
     bottom: 85px;
    }
    100%{
        display: none;
        opacity: 0;
        bottom: 100px;
    }
  }

<div>
  <span id="itemChanger" onclick="startAnimation()">
    <a id="currentItem">DELHI</a> //this item has to disappear sliding to top
    <a id="nextItem"></a> //this should be populated and take the above element's space and so on for 5-10 city names
  </span
</div>

CSS进入和离开动画周期

0 个答案: