type
status
date
slug
summary
tags
category
icon
password

介绍

<TransitionGroup>是一个内置组件,用于对v-for列表中的元素或组件的插入、移除和顺序改变添加动画效果

<Transition>的区别

<TransitionGroup>支持和<Transition>基本相同的propsCSS过渡classJavaScript钩子监听器,但 有以下几点区别:
  1. 默认情况下,它不会渲染一个容器元素。但你可以传入 tag prop 来指定一个元素作为容器元素来渲染
  1. 过渡模式在这里不可用,因为这里不再是在互斥的元素之间进行切换
  1. 列表中的每个元素都必须有独一无二的key标志
  1. CSS过渡class会被应用在列表内的元素上,而不是容器元素上

基本使用

结合animate css动画库,做一个列表元素的"进入和离开"的渲染
效果演示:
notion image

列表的移动过渡

<TransitionGroup>除了做进入和离开的动画效果,它还可以为定位的改变添加动画。
新增的 v-move 类就可以使用这个新功能,它会应用在元素改变定位的过程中。像之前的类名 一样,它的前缀可以通过name属性来自定义,也可以通过move-class属性来手动设置
代码示例:
效果演示:
notion image

状态过渡

Vue 也同样可以给数字 Svg 背景颜色等添加过度动画 今天演示数字变化
效果演示:
notion image
学习Vue3第二十节:依赖注入Provide/Inject《花舍》
衔蝉
衔蝉
一个普通的干饭人🍚
公告
type
status
date
slug
summary
tags
category
icon
password
欢迎来到衔蝉的博客小站✨
这里是我的个人学习、生活记录
--- 免责声明 ---
⚠️ 本站内容仅代表个人观点
⚠️ 本站内容仅供学习参考使用
--- 关于我 ---
我要如加菲猫一般地活着
一大碗杂碎面
就能换来一个艳阳天🌻