大家可以先看下官網小程序apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html,看完之後推薦看一下http://www.jb51.net/article/102263.htm講animation的文章,上面寫的很詳細
源碼如下:(直接複製到一個wepy文件中就可以使用了)
<template>
<view class="shop-cart">
<button class="show-btn" @tap="show">展示</button>
<view class="demo" animation="{{animationData}}">
<button class="btn" @tap="hide">X</button>
</view>
</view>
</template>
<script>
import wepy from 'wepy'
export default class ShopCart extends wepy.page {
config = {
navigationBarTitleText: '購物車'
};
components = {
};
mixins = [];
data = {
animationData: {}
}
computed = {}
methods = {
show () {
this.animation.height('200rpx').step()
this.setData({
animationData: this.animation.export()
})
},
hide() {
this.animation.height(0).step()
this.setData({
animationData: this.animation.export()
})
}
}
events = {}
onLoad() {
let animation = wx.createAnimation({
duration: 1000,
timingFunction: 'ease'
})
this.animation = animation
}
}
</script>
<style lang="less">
.demo {
width: 100%;
height: 0rpx;
background: pink;
position: absolute;
bottom: 0;
.btn {
width: 30rpx;
height: 30rpx;
color: #000;
font-size: 10rpx;
position: absolute;
top: 0;
right: 0;
}
}
</style>