vue学习笔记四:过渡与动画

一、过渡和动画基础

1、过渡
在这里插入图片描述
name:样式名
在这里插入图片描述
2、transition组件/标签

在这里插入图片描述
在这里插入图片描述
opacity:透明度
在这里插入图片描述
3、自定义类名
在这里插入图片描述
在这里插入图片描述

引用animate.css
使用animate:基本类名.动画类名
appear:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4、使用@keyframes创建CSS动画
在这里插入图片描述
transform:scale(x):缩放x,0<=x<=1
在这里插入图片描述
5、钩子函数实现动画
在这里插入图片描述
在这里插入图片描述
done:代表钩子函数完成,告诉vue动画执行完成
在这里插入图片描述
6、vue结合velocity.js实现动画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
配置:complete:done
在这里插入图片描述

二、多个元素过渡

1、不同标签名元素过渡
在这里插入图片描述
transition同一时间,只能对一个元素进行过渡。
在这里插入图片描述
2、相同标签名元素过渡
在这里插入图片描述
在这里插入图片描述
3、过渡模式
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、多个组件过渡

在这里插入图片描述
在这里插入图片描述
is属性绑定
javascript:;用于阻止HTML跳转
在这里插入图片描述

四、列表过渡

1、列表过渡
在这里插入图片描述
在这里插入图片描述
splice():增加或替换
2、列表的排序过渡
在这里插入图片描述
在这里插入图片描述
然后编写HTML、CSS和JS代码
在这里插入图片描述
3、列表的交错过渡(延迟过渡)

☆列表的交错过渡通过自定义data属性处理
filter遍历数组中的每一项
4、可复用的过渡
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
☆插槽占位
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/jinyeran/article/details/121204040