微信小程序开发之——动画-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-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享
- 2024-11-20微信小程序全栈教程:从零开始的全攻略
- 2024-11-19微信小程序全栈学习:从零开始的完整指南