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首次渲染

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/l_l_l_l_l_l_l_li/article/details/118056277