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

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

阅读 3.5k
1 个回答

参见 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;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题