vue3动画的基本使用

一、vue的transition动画

1、transition的基本使用

注意:transition组件包裹单个元素或者组件

在这里插入图片描述

2、transition组件的原理

在这里插入图片描述

3、过渡动画的class

在这里插入图片描述

注意:如果transition组件没有设置name属性,那么class默认使用 v-

4、class的命名规则和添加时机

在这里插入图片描述

注意:如果我们使用的是一个没有name的transition,那么所有的class是以 v- 作为默认前缀;
如果我们添加了一个name属性,比如 ,那么所有的class会以 why- 开头;

二、animation动画

在这里插入图片描述
在这里插入图片描述

三、同时设置animation和transition

在这里插入图片描述

四、显示指定的动画时间

在这里插入图片描述

五、两个元素切换 mode属性

在这里插入图片描述
在这里插入图片描述

五、动态组件的切换

在这里插入图片描述

六、appear首次渲染

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值