### 彪哥

爱好前端

- 基础

- 组件

- 过渡&动画

  - transition过渡&动画
    - 使用
    - 过渡的类名
    - css过渡 demo
    - css动画 demo
      - 组件中使用的示例
  - 使用animate库
  - transition-group列表过渡

- 可复用性&组合

- 工具

- 规模化

- Vuex

- 其他

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

heBody
2020-02-04
目录

# transition过渡&动画

# # transition过渡&动画

API
(opens new window)

## # 使用

需要设置动画的元素或组件要在外边包裹一个`<transition>`标签，设置自定义的`name`，vue会根据元素的切换（进入/离开）过程添加相应的css类名，你可以自由地使用css类名来设置css过渡&动画。

## # 过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

各类名的生命周期

- 进入

  - `v-enter` 只存在于第一帧
  - `v-enter-active` 第一帧到最后一帧，结束后移除
  - `v-enter-to` 第二帧到最后一帧，结束后移除

- 离开

  - `v-leave` 只存在于第一帧
  - `v-leave-active` 第一帧到最后一帧，结束后移除
  - `v-leave-to` 第二帧到最后一帧，结束后移除

如果你使用一个没有`name`的`<transition>` ，则 `v-` 是这些类名的默认前缀。如果你使用了`name="fade"`，那么 `v-` 前缀会替换为 `fade-`。

## # css过渡 demo

See the Pen vue的过渡动画 by heBody (@heBody) on CodePen.

## # css动画 demo

See the Pen vue的动画 by heBody (@heBody) on CodePen.

### # 组件中使用的示例

    <template>
        <transition name="slide">
             <div class="add-song">
                 ...
            </div>
        </transition>
    <template>

1
2
3
4
5
6
7

     .add-song
        &.slide-enter-active, &.slide-leave-active
          transition: all 0.3s
        &.slide-enter, &.slide-leave-to
          transform: translate3d(100%, 0, 0)

1
2
3
4
5
编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
vue父子组件的生命周期顺序
使用animate库

← vue父子组件的生命周期顺序 使用animate库→

最近更新

  01
Git修改分支名
08-11

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

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

更多文章>

Copyright © 2016-2022 Hesb | MIT License

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