vue的动画

vue的动画可以分为两种
一种是动画效果, 另一种叫过渡效果
当然, 如果不使用 vue 的动画, 我们自己来使用 css3 写出一个关键帧动画, 也是可以的
要使用vue 的动画, 我们首先要在, 动画的元素上面 加上 transition 在 transition元素上, 可以添加
name 为动画指定一个标识
appear 设置节点在初始渲染的过渡 如果 appear = true 表示在页面 第一次加载的时候就使用动画
下面来展示一下 第一种动画效果的代码
在这里插入图片描述
上面的代码属于关键帧的动画


vue的transition 标签在使用过程中, 会在适当的时机, 自动为动画的元素加上三个类名
.v-enter 动画的起点
.v-enter-active 动画进入的过程中
.v-enter-to 动画起始后的终点
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
.v-leave 动画离开是的起点
.v-leave-active 动画离开的过程中
.v-leave-to 动画离开的终点


下面我们来说一下 过渡动画
过渡动画, 就是我们 为动画的元素指明 起点时的样子 和 终点是的样了, 再指明动画时长, 是否匀速等, 从代码中说明情况
在这里插入图片描述
以上就是 vue 动画的两种方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

A黄俊辉A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值