### 彪哥

爱好前端

- 基础

- 组件

- 过渡&动画

  - transition过渡&动画
  - 使用animate库
  - transition-group列表过渡
    - 列表的进入/离开过渡
    - 列表的排序过渡

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

- 《Vue》笔记
- 过渡&动画

heBody
2020-02-04
目录

# transition-group列表过渡

# # transition-group列表过渡

## # 列表的进入/离开过渡

    <transition-group tag="ul"> <!--tag转为ul-->
        <li v-for="item in list" :key="item">{{item}}</li> <!--子元素要有key-->
    </transition-group>

1
2
3

注意：列表元素一定要有`key`

    .v-enter,.v-leave-to{
      opacity: 0;
      transform: translateX(30px);
    }
    .v-enter-active,.v-leave-active{
      transition: all 1s;
    }

1
2
3
4
5
6
7

See the Pen vue列表过渡 by heBody (@heBody) on CodePen.

## # 列表的排序过渡

    .v-move {
      transition: transform 1s;
    }

1
2
3

See the Pen vue列表过渡-排序过渡 by heBody (@heBody) on CodePen.

列表过渡&排序过渡

See the Pen vue列表过渡&排序过渡 by heBody (@heBody) on CodePen.

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
使用animate库
Mixin混入

← 使用animate库 Mixin混入→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式