H5中的动画及vue中动画的使用

一、h5动画

(一)h5中动画的实现方式有2种:

1、css动画:能够实现2D/3D位移、缩放、颜色和透明度变换以及简单的滤镜效果(模糊)。体积小,效率高是优先考虑的动画实现方式

(1)位移动画(translate):因为位置变化而产生的动画称为位移动画

(2)旋转动画(roate):因为角度的变化而产生的动画称为旋转动画

(3)缩放动画(scale):因为大小的变化而产生的动画称为缩放动画,其中又分等比缩放和非等比缩放

(4)形变动画(skew):因为倾斜的变化而产生的动画称为形变动画

现以正方体为例,其他不做过多介绍

html部分

img_f7b48481c3ebd3abde0495a9bcc4869a.png

css部分

img_47822b6950ee31a77d64868744640706.png
img_3391250e97d007f2886218b21b6a71b4.png

transition 属性是一个简写属性,用于设置四个过渡属性:

transition-property :规定设置过渡效果的 CSS 属性的名称。

transition-duration :规定完成过渡效果需要多少秒或毫秒。

transition-timing-function :规定速度效果的速度曲线

transition-delay : 定义过渡效果何时开始。

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

2、逐帧动画:以GIF图或JPG/PNG序列的格式呈现,还原度高,可以模拟形变效果,但体积大,更适合展示时长较短,面积较小的可循环动画

(1)@keyframes定义动画

img_81fe3ed7685babd9d5d6ac6883c86698.png

(2)在需要添加动画的元素的css样式中调用定义好的动画

img_6a2c5d5500d54dcbf6e7407f7db72282.png

二、vue中动画的使用

首先根据官网文档,了解一下进入/离开 & 列表过渡的状态的类名:

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 ,则 v-是这些类名的默认前缀。如果你使用了 ,那么 v-enter 会替换为 my-transition-enter。

v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

img_1b45e948f2f5424d52126d6715b27dca.png

(一)先来一个css动画

点击右侧蓝色按钮,红色按钮切换显隐并实现水平移动,总用时2s

img_03c35ef355a2cf86534d90585c1a3e2e.png
img_f36a92c08b65f5110c5633f3f7d7ba0f.png

布局如下:

img_b2da26638c270daf3978e5379113ddde.png
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值