微信小程序开发之——动画-CSS动画(1)
2021/9/30 17:40:51
本文主要是介绍微信小程序开发之——动画-CSS动画(1),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一 概述
- CSS动画基础预习
- CSS动画过程动作监听
- CSS动画示例
二 CSS动画基础预习
- CSS渐变动画:提供了一种在更改CSS属性时控制动画速度的方法
- CSS动画:使得可以将从一个CSS样式配置转换到另一个CSS样式配置
三 CSS动画过程动作监听
事件名 | 含义 |
---|---|
transitionend | CSS 渐变结束或 wx.createAnimation 结束一个阶段 |
animationstart | CSS 动画开始 |
animationiteration | CSS 动画结束一个阶段 |
animationend | CSS 动画结束 |
四 CSS动画示例
4.1 布局文件(index.wxml)
<view class="box {{extraClasses}}" bindtransitionend="transitionEnd" bindanimationstart="animationStart" bindanimationiteration="animationIteration"> </view> <button class="btn" bindtap="triggerTransition">触发 CSS 渐变</button> <button class="btn" bindtap="triggerAnimation">触发 CSS 动画</button>
说明:
- extraClasses:给此属性赋值动画
- animationStart:动画开始时,执行此操作(文中打印结果)
- animationIteration:动画执行时,执行此操作(文中打印结果)
- transitionEnd:动画执行结束时,执行此操作(文中打印结果)
- triggerTransition:动画执行事件
- triggerAnimation:动画执行事件
4.2 样式文件(index.wxss)
.box { width: 100rpx; height: 100rpx; margin: 60rpx; background: red; } .btn { margin: 30rpx 60rpx 0; } .box-transition { transition: all 0.5s; } .box-moved { margin-left: 590rpx; } @keyframes box-ani { from {margin-left: 60rpx} to {margin-left: 590rpx} } .box-animation { animation: box-ani 1s alternate infinite; }
4.3 逻辑文件(index.js)
const app = getApp() Page({ data: { extraClasses: '', }, triggerTransition: function () { if (this.data.extraClasses == 'box-transition box-moved') { this.setData({ extraClasses: 'box-transition' }) } else { this.setData({ extraClasses: 'box-transition box-moved' }) } }, triggerAnimation: function () { this.setData({ extraClasses: 'box-animation' }) }, transitionEnd: function () { console.log('渐变已结束') }, animationStart: function () { console.log('动画已开始') }, animationIteration: function () { console.log('动画进行中') }, })
4.4 界面效果
五 参考
- 界面动画的常见方式
这篇关于微信小程序开发之——动画-CSS动画(1)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践