1.下载animate.css下载
2.引入animate
1在小程序项目中创建一个公共像是文件夹(比如:comm)；
2将下载好的animate.css文件赋值进该文件夹；
3在app.wxss中引入animate.css
@import './comm/animate.wxss';
3.使用
index.wxml
<view class="index-body flex-direction-colum">
<view class="index-content flex-justify-center flex-align-items-center">
<view class="{{animateData}}">
<view class="animate-view flex-justify-center flex-align-items-center">
动画
</view>
</view>
</view>
<view class="animated-names">
<view wx:for="{{animatedName}}" wx:key="i" wx:for-index="i" wx:for-item="obj">
<view class="animated-names-title">{{obj.name}}</view>
<view class="animated-names-content">
<view class="animate-name flex-wrap">
<button data-name="{{item}}" bindtap="changeAnimated" class="animate-button" wx:key="index" wx:for="{{obj.content}}" wx:key="index">{{item}}</button>
</view>
</view>
</view>
</view>
</view>
index.wxss
/* pages/home/animated/index.wxss */
.index-content{
height: 40vh;
}
.animate-view {
height: 120px;
width: 200px;
background-color: #aaa;
color: #fff;
margin: 40px 0 40px 0;
border-radius: 10px;
}
.animate-name {
padding: 0 20px 10px 10px;
}
.animate-button {
height: 30px;
width: 150px;
line-height: 30px;
font-size: 18px;
margin: 10px 0 0 10px;
background-color: #f7f7f7;
}
.animate-button:hover{
background-color: #aaa;
color: #fff;
}
.animated-names {
height: 60vh;
overflow: auto;
}
.animated-names-title{
font-size: 18px;
padding: 10px;
margin: 0 0 0 10px;
}
index.js
// pages/home/animated/index.js
Page({
/**
* 页面的初始数据
*/
data: {
animateData: "animated bounce",
animatedName: [{
name: 'Attention Seekers',
content: ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble']
}, {
name: 'Bouncing Entrances',
content: ['bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp']
}, {
name: 'Bouncing Exits',
content: ['bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp']
}, {
name: 'Fading Entrances',
content: ['fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig']
}, {
name: 'Fading Exits',
content: ['fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig']
}, {
name: 'Rotating Entrances',
content: ['rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight']
},
{
name: 'Rotating Exits',
content: ['rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight']
},
{
name: 'Sliders',
content: ['slideInDown', 'slideInLeft', 'slideInRight', 'slideOutLeft', 'slideOutRight', 'slideOutUp']
},
{
name: 'Specials',
content: ['hinge', 'rollIn', 'rollOut']
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
},
/**
* 改变动画样式
*/
changeAnimated(e) {
this.setData({
animateData: ""
})
this.setData({
animateData: "animated " + e.currentTarget.dataset.name
})
}
})
效果
