别院牧志知识库 别院牧志知识库
首页
  • 基础

    • 全栈之路
    • 😎Awesome资源
  • 进阶

    • Python 工匠系列
    • 高阶知识点
  • 指南教程

    • Socket 编程
    • 异步编程
    • PEP 系列
  • Python 面试题
  • 2025 面试记录
  • 2022 面试记录
  • 2021 面试记录
  • 2020 面试记录
  • 2019 面试记录
  • 数据库索引原理
  • 基金

    • 基金知识
    • 基金经理
  • 细读经典

    • 德隆-三个知道
    • 孔曼子-摊大饼理论
    • 配置者说-躺赢之路
    • 资水-建立自己的投资体系
    • 反脆弱
  • Git 参考手册
  • 提问的智慧
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
首页
  • 基础

    • 全栈之路
    • 😎Awesome资源
  • 进阶

    • Python 工匠系列
    • 高阶知识点
  • 指南教程

    • Socket 编程
    • 异步编程
    • PEP 系列
  • Python 面试题
  • 2025 面试记录
  • 2022 面试记录
  • 2021 面试记录
  • 2020 面试记录
  • 2019 面试记录
  • 数据库索引原理
  • 基金

    • 基金知识
    • 基金经理
  • 细读经典

    • 德隆-三个知道
    • 孔曼子-摊大饼理论
    • 配置者说-躺赢之路
    • 资水-建立自己的投资体系
    • 反脆弱
  • Git 参考手册
  • 提问的智慧
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 工作
  • 规范

  • Linux

  • 数据库

  • Git

  • 👨‍💻Web

  • 英语

  • Docker

  • 编辑器

  • 网络

  • 前端

    • 前端模板收集
    • 《Vue》笔记

      • 基础

      • 组件

      • 过渡&动画

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

      • 工具

      • 规模化

      • Vuex

      • 其他

    • Vue 资源
    • Angular

    • JavaScript

    • Vue文章

  • 存储

  • 备忘录

  • 如何开始你的单元测试
  • 以程序员的视角看中国——西安篇
  • 💻工作
  • 前端
  • 《Vue》笔记
  • 过渡&动画
xugaoyi
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 xugaoyi (@xugaoyi) on CodePen.

# css 动画 demo

See the Pen vue的动画 by xugaoyi (@xugaoyi) 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)
上次更新: 2025-05-29, 07:39:39
vue 父子组件的生命周期顺序
使用 animate 库

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

最近更新
01
Flask 运行周期及工作原理
06-05
02
支付系统策略模式实现代码
06-04
03
Python 中 OOM(内存泄漏)问题的定位与分析
05-30
更多文章>
Theme by Vdoing | Copyright © 2019-2025 IMOYAO | 别院牧志
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式