如何实现列表增删时的过渡动画?【如图】

苏子晨
  • 145

动画示例

如图。图中是用 Vue 的 <transition-group> 组件和 css 实现的
原生js如果实现这种效果,需要怎么做?

附上html结构和css基本样式代码

<body>
  <button>随机插入一项</button>
  <button>删除倒数第二项</button>
  <div class="list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</body>
.list {
  width: 800px;
  height: 900px;
  margin-top: 10px;
  padding: 10px;
  border: 3px solid #000;
}
.item {
  display: inline-block;
  width: 370px;
  height: 50px;
  margin: 10px;
  line-height: 50px;
  text-align: center;
  background-color: beige;
}

/* 用于VUE动画的CSS */
.list-enter, .list-leave-to {
  opacity: 0;
}
.list-leave-active {
  position: absolute;
}
.item {
  transition: all 0.4s;
}
回复
阅读 2.4k
2 个回答

在适当的时候增删 class。

vue 大概是这样实现的

  1. 获取到插入前所有元素的位置信息
  2. 获取到插入后所有元素的位置信息
  3. 使用定位 + transition 进行过渡
  4. 去掉定位信息
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏