vue+帧动画实现动态排名得动画效果?

作者站长头像
站长
· 阅读数 15

ajax每5s请求一次数据,只展示前5名得排名情况;如果第一名在下次数据请求时变成了第二名,那就要出现一个切换位置的动画,有做过类似效果的动画高手吗?

回复
1个回答
avatar
test
2024-07-12

参见 Vue 官方的移动动画 演示

关键代码:

<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容